Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 23, 2017 at 10:13 pm #782065
    jonesthelight

    Hi guys.
    I’m working on http://3pointlighting.co.uk/wordpress/four-seasons-hampshire/ and I have the following CSS to place a border etc. around the current menu item:

    #header .av-main-nav .current-menu-item > a > .avia-menu-text 
{border:1px solid rgba(55, 55, 55 ,1) !important;margin-left:5px !important;padding:5px !important;background-color: rgba(255, 255, 255, 0.75) !important;}
.main_menu ul:first-child > li > a { font-size: 17px; font-weight:normal; }

    The problem I have is the current item in the drop-down should not have this effect but I cannot figure out how to remove it.
    Also, can the drop-down be wide enough to accommodate each entry on a single line? I have to add 13 more entries.
    Thanks a lot

    April 23, 2017 at 11:22 pm #782083
    Mike

    Hey jonesthelight,
    Try this code in the General Styling > Quick CSS field:

    .av-main-nav ul li { 
width: 120% !important; 
} 
.html_header_top .header_color .main_menu ul:first-child >li > ul {
border-color:transparent !important;
}

    Best regards,
    Mike

    April 23, 2017 at 11:56 pm #782097
    jonesthelight

    Thanks Mike – it certainly sorted the width, but the border is still there and looks a bit odd. I’d rather lose it and just have the current page identified by the left margin.
    I tried playing around with border:0px but it didn’t seem to affect it.
    Any further thoughts?

    April 24, 2017 at 5:48 am #782146
    Rikard

    Hi,

    Thanks for the feedback. Could you try removing the !important statement in your CSS? Otherwise it probably won’t override if we give you additional CSS:

    #header .av-main-nav .current-menu-item > a > .avia-menu-text {
border:1px solid rgba(55, 55, 55 ,1);
margin-left:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.75);
}

.main_menu ul:first-child > li > a { 
font-size: 17px; 
font-weight:normal; 
}

    Best regards,
    Rikard

    April 24, 2017 at 8:05 am #782182
    jonesthelight

    Hi Rikard
    Thanks for your time. My CSS now looks like:

    #header .av-main-nav .current-menu-item > a > .avia-menu-text {
border:1px solid rgba(55, 55, 55 ,1);
margin-left:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.75);
}
.main_menu ul:first-child > li > a { font-size: 17px; font-weight:normal; }
.av-main-nav ul li {
width: 140% !important;
}
.html_header_top .header_color .main_menu ul:first-child >li > ul {
border-color:transparent !important;
}

    The border on the drop-down still persists, though.

    Hatfield House Old Palace

    It’s close, works great on mobile, just a bit off on browsers.

    April 25, 2017 at 5:37 am #782634
    Rikard

    Hi,

    Please try to add this as well, below your existing code:

    .sub-menu .avia-menu-text {
    border: none !important;
}

    Best regards,
    Rikard

    April 25, 2017 at 8:20 am #782696
    jonesthelight

    Perfecto! Many thanks to you.

    April 25, 2017 at 10:50 am #782729
    Sarah

    Hi,

    We’re always happy to help. Do let us know here in the forums if you need anything else.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Menu styling, drop-down’ is closed to new replies.