-
AuthorPosts
-
April 23, 2017 at 10:13 pm #782065
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 lotApril 23, 2017 at 11:22 pm #782083Hey 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,
MikeApril 23, 2017 at 11:56 pm #782097Thanks 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 #782146Hi,
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,
RikardApril 24, 2017 at 8:05 am #782182Hi 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.
It’s close, works great on mobile, just a bit off on browsers.
April 25, 2017 at 5:37 am #782634Hi,
Please try to add this as well, below your existing code:
.sub-menu .avia-menu-text { border: none !important; }
Best regards,
RikardApril 25, 2017 at 8:20 am #782696Perfecto! Many thanks to you.
April 25, 2017 at 10:50 am #782729Hi,
We’re always happy to help. Do let us know here in the forums if you need anything else.
Cheers!
Sarah -
AuthorPosts
- The topic ‘Menu styling, drop-down’ is closed to new replies.