Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 22, 2017 at 5:31 pm #855448
    ScottYetter

    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

    September 22, 2017 at 5:37 pm #855454
    Yigit

    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

    September 22, 2017 at 6:21 pm #855487
    ScottYetter

    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

    September 22, 2017 at 6:35 pm #855501
    Yigit

    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

    September 22, 2017 at 11:17 pm #855631
    ScottYetter

    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!

    September 24, 2017 at 6:27 pm #856171
    Victoria

    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

    September 25, 2017 at 6:28 am #856325
    ScottYetter

    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!

    September 25, 2017 at 3:27 pm #856516
    Yigit

    Hi,

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    September 25, 2017 at 5:12 pm #856598
    ScottYetter

    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, 3 months ago by ScottYetter.
    September 25, 2017 at 6:33 pm #856654
    Nikko

    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

    September 25, 2017 at 7:29 pm #856678
    ScottYetter

    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?

    September 26, 2017 at 8:48 am #856825
    Nikko

    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

    September 26, 2017 at 5:10 pm #857021
    ScottYetter

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

    September 26, 2017 at 5:13 pm #857024
    Yigit

    Hi,

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

    Best regards,
    Yigit

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