Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 29, 2016 at 8:22 pm #624753
    laptophobo

    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.

    April 29, 2016 at 8:51 pm #624764
    Jordan

    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

    April 29, 2016 at 9:05 pm #624769
    laptophobo

    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

    April 29, 2016 at 11:16 pm #624822
    Jordan

    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

    April 30, 2016 at 12:04 am #624831
    laptophobo

    Hi. Below is the stuff.

    May 2, 2016 at 7:30 am #625488
    Rikard

    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

    May 2, 2016 at 5:35 pm #625958
    laptophobo

    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 ;
    }

    May 3, 2016 at 2:43 pm #626482
    Yigit

    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

    May 3, 2016 at 7:07 pm #626691
    laptophobo

    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,

    May 6, 2016 at 5:40 am #628091
    Ismael

    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

    May 7, 2016 at 1:15 am #628509
    laptophobo

    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

    May 10, 2016 at 8:30 am #629714
    Andy

    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

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