Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #624753

    I’m trying to modify a couple of sub navigation styles:

     #top .av-submenu-container {
        height: 6em;}
    
    #top .av-subnav-menu > li {
        padding: 25px 10px 25px 10px;
    	margin-bottom: 10px;
        display: inline-block;
    }

    And there’s no problem when I do it that way, but I’m trying to isolate the style change to only the Home page. I’ve tried the following, but it won’t work:

    body.home #top .av-submenu-container {
        height: 6em;}
    
    body.home #top .av-subnav-menu > li {
        padding: 25px 10px 25px 10px;
    	margin-bottom: 10px;
        display: inline-block;
    }

    After spending quite a bit of type with variations of html, I’m unable to figure out the solution.

    #624764

    Hey laptophobo,

    Have you tried using the page id of your homepage? Also try try removing the id #top, as this is the ID used for the body tag on every page, so the changes will show up on all pages if you use #top.

    Best regards,
    Jordan Powell

    #624769

    Yeah, I tried that early on, and these:

    body.page.page-id-734 #top .av-submenu-container
    body.page.page-id-734 .av-submenu-container
    body.page.page-id-734 div .av-submenu-container

    #624822

    Hi,

    Would you mind providing a link to your site in the private data section, so that we can have a closer look and see if we can get a better CSS target for your homepage.

    Best regards,
    Jordan Powell

    #624831

    Hi. Below is the stuff.

    #625488

    Hi,

    I’m not sure exactly what you are trying to edit but using this CSS should work for targeting the first item in your sub menu:

    .html_entry_id_3964 #menu-item-3747 a .avia-menu-text {
    
    }
    

    Thanks,
    Rikard

    #625958

    Hi Rikard,

    As noted at the beginning of the thread, I’m trying edit the navigation menu height, but only on a specific page. This is the original code:

    #top .av-submenu-container{
    height: 6em ;
    }

    I tried the following code, but it didn’t work:

    body#top.page-id-3964 .av-submenu-container{
    height: 6em ;
    }

    #626482

    Hi,

    This is how it looks on my end. Can you please post a screenshot and point out the issue you are having?

    Best regards,
    Yigit

    #626691

    Hi. I’ve posted a compilation of screen shots to show you what the problem is. Please see the private content for the link.

    Thanks,

    #628091

    Hi,

    The following code are not working because the #top selector is also an attribute of the body tag.

    body.home #top .av-submenu-container {
        height: 6em;}
    
    body.home #top .av-subnav-menu > li {
        padding: 25px 10px 25px 10px;
    	margin-bottom: 10px;
        display: inline-block;
    }

    It should be replaced with the following:

    .home#top .av-submenu-container {
        height: 6em;}
    
    .home#top .av-subnav-menu > li {
        padding: 25px 10px 25px 10px;
    	margin-bottom: 10px;
        display: inline-block;
    }

    Or a more appropriate css code:

    .home .av-submenu-container {
        height: 6em;}
    
    .home .av-subnav-menu > li {
        padding: 25px 10px 25px 10px;
    	margin-bottom: 10px;
        display: inline-block;
    }

    Best regards,
    Ismael

    #628509

    Hi. Sorry, this didn’t work either. I’ve placed this test navigation on a different (non Home) page. So, what was:

    body#top.page-id-3964 .av-submenu-container{
    	height: 6em ;
    	background-color:#00FFFF;
    	}

    did give the height 6em with the color of #00FFFF–but not on responsive view.

    Using your suggestion:

    .page-id-3964#top .av-submenu-container{
    	height: 6em ;
    	background-color:#00FFFF;
    	}

    produces the same results as above.

    and finally:

    .page-id-3964 .av-submenu-container {
        height: 6em;}

    (which is what I had originally tried), does nothing at all

    #629714

    Hi,

    on desktop it seems fine to me. For iPhone screen size use this code inside of Quick CSS field:

    @media only screen and (max-width: 767px) {
    .responsive #top .av-submenu-container {
    height: 225px !important;
    }}
    

    and adjust as needed.

    Best regards,
    Andy

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.