Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 10, 2015 at 11:34 pm #377858
    Jox

    Hey guys! I’m using the menu layout Logo Left Menu Below and I’m trying to edit the menu bar height. I’ve tried height and line-height and haven’t had any success. Any chance you guys could help out? The menu bar is currently too compressed.

    Let me know if you guys need anything!

    January 12, 2015 at 8:14 am #378179
    Ismael

    Hi Jox!

    Thank you for using Enfold.

    We would like to see the actual website and a screenshot of how you want the menu to look like. Please post it here. Try to use this to later the padding of the menu items:

    .html_header_sidebar #header .av-main-nav > li > a {
line-height: 1.3em;
height: auto;
padding: 20px 3px;
}

    Regards,
    Ismael

    January 12, 2015 at 5:58 pm #378414
    Jox

    Here is my site: lashlovers.org

    The menu I’m trying to make mine similar to is the one here: http://rachelsuesskow.com/

    January 12, 2015 at 7:17 pm #378470
    Andy

    Hey!

    to control the height use this in Quick CSS field:

    #header #header_main_alternate .container {
height: 50px;
}

    To center your menu items use this:

    .html_header_top #top .av_menu_left .main_menu {
bottom: -7px;
}

    Cheers!
    Andy

    January 12, 2015 at 8:36 pm #378510
    Jox

    Thanks Andy!! That got the positioning I was looking for. However, now the hover effect does not work properly. How would I correct that? Upon mouse over I have the menu background and text flip colors. If you look at the site you can see what I’m talking about. Just want to get the hover effect to cover the entire menu area as well.

    Justin

    January 13, 2015 at 6:18 pm #378979
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
height: 50px;
line-height: 50px;
}

    and remove following code

    .html_header_top #top .av_menu_left .main_menu {
bottom: -7px;
}

    Best regards,
    Yigit

    January 20, 2015 at 11:47 pm #382785
    Jox

    Awesome, Yigit!! Worked like a charm. One more quick question. How do I target the menu text?

    January 21, 2015 at 7:08 pm #383265
    Elliott

    Hey!

    You can target it with this.

    .avia-menu-text {  }

    But if your just trying to style them then you can do this easily in Dashboard > Enfold > Advanced Styling for both the main level links and the sub menu links.

    Cheers!
    Elliott

    January 21, 2015 at 7:12 pm #383267
    Jox

    Awesome, thanks Elliot!! You can close this ticket now :)

    Cheers,
    Justin

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Menu Bar Height’ is closed to new replies.