-
AuthorPosts
-
September 22, 2017 at 5:31 pm #855448
Hi, I am using the enfold theme with Flat Business Demo. I would like to increase the space between the main navigation items. Please see my attached image. Please let me know how I can do this, thanks!
September 22, 2017 at 5:37 pm #855454Hey,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.av-main-nav > li > a { padding: 0 20px; }
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
YigitSeptember 22, 2017 at 6:21 pm #855487That worked great, however, now the line underneath each hover menu item or the active menu item extends much further past the text (horizontally). See the attached image. I would like the line to be the exact width of the menu item. Is there a way to do that?
September 22, 2017 at 6:35 pm #855501Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#top .av_header_transparency .avia-menu-fx { width: 60%; left: 21%; }
Best regards,
YigitSeptember 22, 2017 at 11:17 pm #855631I adjusted the top code you supplied to push the navigation further down the page (added ’35px’), like this:
.av-main-nav > li > a {
padding: 35px 30px;
}
Problem is now the underline is on top of the words in the nav, not underneath. Is there a way to have the line just move with the text? Please see my link below.Also, the second code you provided helped in that it got the lines closer to being the same width of the words. Unfortunately, on “Implementation” (see link below), it is not even close. Is there a way to have it exactly match the width of the word?
Thank you!
September 24, 2017 at 6:27 pm #856171Hi ScottYetter,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text { height: 50px; display: inline-block; } #top #header.header_color.av_header_transparency .av-main-nav > li:hover > a span.avia-menu-text { border-bottom: 2px solid; }
If you need further assistance please let us know.
Best regards,
VictoriaSeptember 25, 2017 at 6:28 am #856325Thank you Victoria! This code has made a new line that is the perfect width. Unfortunately there are now 2 lines when you hover over an item. Do you know how to remove the other one?
Here is an image for reference:
Thank you!
September 25, 2017 at 3:27 pm #856516Hi,
Please add following code to Quick CSS as well
span.avia-menu-fx { display: none; }
Best regards,
YigitSeptember 25, 2017 at 5:12 pm #856598Thanks, that did get rid of the second underline.
Unfortunately it also removed the “active” state underline indicating the page you are one. Is there a way to keep that? The attached screenshot shows the hover state (On the ‘Solutions’ text), which is fine.
- This reply was modified 7 years, 1 month ago by ScottYetter.
September 25, 2017 at 6:33 pm #856654Hi,
Please remove this code to get the underline back on the active menu:
span.avia-menu-fx { display: none; }
and add this css code:
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text { border: 0 !important; }
Hope this helps.
Best regards,
NikkoSeptember 25, 2017 at 7:29 pm #856678Ok, active state underline is now back, BUT this has re-introduced the problem of the underline not being the same width of the text (one of my original problems). Is there a way to have the underline always match the width of the text and have the active state underlined?
September 26, 2017 at 8:48 am #856825Hi,
Sorry about that, please try to remove the code I gave:
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text { border: 0 !important; }
then add this css code:
#top #header.header_color.av_header_transparency .av-main-nav > li.current_page_item > a .avia-menu-text { border-bottom: 2px solid #fff; } span.avia-menu-fx { display: none; }
Hope this helps :)
Best regards,
NikkoSeptember 26, 2017 at 5:10 pm #857021Ok that worked, we can close this one down! Thanks everyone for your help!
September 26, 2017 at 5:13 pm #857024 -
AuthorPosts
- The topic ‘Increase margins between main navigation items (Enfold)’ is closed to new replies.