Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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!

    Bert Header 3

    #855454

    Hey,

    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,
    Yigit

    #855487

    That 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?

    bert 4

    #855501

    Hi,

    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,
    Yigit

    #855631

    I 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!

    #856171

    Hi 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,
    Victoria

    #856325

    Thank 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:
    header 7

    Thank you!

    #856516

    Hi,

    Please add following code to Quick CSS as well

    span.avia-menu-fx {
        display: none;
    }

    Best regards,
    Yigit

    #856598

    Thanks, 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.

    Bert header 10

    • This reply was modified 7 years, 1 month ago by ScottYetter.
    #856654

    Hi,

    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,
    Nikko

    #856678

    Ok, 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?

    #856825

    Hi,

    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,
    Nikko

    #857021

    Ok that worked, we can close this one down! Thanks everyone for your help!

    #857024

    Hi,

    Glad we could help! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Increase margins between main navigation items (Enfold)’ is closed to new replies.