Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 12, 2014 at 10:16 pm #350396
    jeffreyvanoostrom

    Hi guys,

    I want a thin line between the menu as well as remove the bottom menu line. I know the code and it works for 95% very well. I used this code:

    .av-main-nav > li:first-child .avia-menu-text{ border-left: 0; }
    .av-main-nav > li:last-child .avia-menu-text{ border-left: 6; }
    .avia-menu-fx{ display: none; }
    .av-main-nav > li > a > .avia-menu-text{ border-left: 1px solid #888888; padding: 0 6px;}
    }

    Only the divider is not in the menu center, exactly in between the menu words. (it is on smaller monitor sizes, but not on bigger)
    What to change?

    Thanks

    BR
    Jeff

    November 12, 2014 at 11:30 pm #350457
    Elliott

    Hi jeffreyvanoostrom!

    Try adding this to your custom CSS.

    .avia-menu-text { padding-left: 15px !important; }
#top #header .av-main-nav > li > a { padding-left: 0px !important; }

    Best regards,
    Elliott

    November 13, 2014 at 10:30 am #350603
    jeffreyvanoostrom

    Hi Elliot,

    That doesn’t have the effect I want (the menu spacing increases) The spacing between the menu is fine, only the divider should be centered in between two menu words.

    BR
    Jeff

    November 13, 2014 at 4:32 pm #350702
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .av-main-nav > li > a > .avia-menu-text { padding: 0 0 0 20px; }

    Best regards,
    Yigit

    November 13, 2014 at 6:00 pm #350809
    jeffreyvanoostrom

    Hey Yigit,

    Like this:

    .av-main-nav > li:first-child .avia-menu-text{ border-left: 0; }
    .av-main-nav > li:last-child .avia-menu-text{ border-left: 6; }
    .avia-menu-fx{ display: none; }
    .av-main-nav > li > a > .avia-menu-text{ border-left: 1px solid #888888; padding: 0 6px;}
    }

    .avia-menu-text { padding-left: 0px !important; }
    #top #header .av-main-nav > li > a { padding-left: 0px !important; }

    .av-main-nav > li > a > .avia-menu-text { padding: 0 0 0 20px; }

    Looks like it has some “overlapping” coding. Also not perfect on the site.

    BR
    jeff

    November 14, 2014 at 5:02 am #351118
    Ismael

    Hey!

    Please remove all the css code then use this:

    .av-main-nav > li, .av-main-nav > li > a {
height: 20px !important;
line-height: 20px !important;
}

.av-main-nav > li {
border-left: 1px solid;
}

.av-main-nav > li:first-child {
border-left: none;
}

.avia-menu.av-main-nav-wrap {
top: 30px;
position: relative;
}

    Cheers!
    Ismael

    November 14, 2014 at 9:51 am #351172
    jeffreyvanoostrom

    Hi Ismael,

    Thanks, that worked great. I purchased more than 15 themes from themeforest, and I can honestly say that Enfold is the best theme and has the best support!

    BR
    Jeff

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Divider in menu’ is closed to new replies.