Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 19, 2015 at 9:32 pm #475459
    Micheal0424

    Main navigation area larger.

    I made the fonts larger and now I can’t figure out how to make the general space they are in larger.

    I can get it larger by adding this code but then the area above it gets affected, the logo is smaller and I lose the margins:

    #header_main .container, .main_menu ul:first-child > li a, .logo img, .logo a {
    height: 75px !important;
    line-height: 75px !important;
    max-height: none !important;
    }

    I like how the navigation menu looks though when I use the code, I just don’t like how it messes up the rest of the area.

    ALSO:

    I would like the blue that is the background for the menu items to go all the way across, 100% of the width of the menu.

    I have the header Size set to large in Enfold and used the following code in the area to make the existing changes:

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
    }

    #top .social_bookmarks {
    height: 50px;
    }

    #top .social_bookmarks li {

    width: 50px;
    }

    #top .social_bookmarks li a {
    font-size: 30px;
    line-height: 50px;
    min-height: 50px;
    text-align: center;
    width: 50px;
    }

    I am stuck at this point and can’t figure out how to get any further.

    Thank you for your help.

    Recap:

    I want the blue navigation bar to be larger and to be blue 100% of the bar width.

    Thanks.

    • This topic was modified 8 years, 10 months ago by Micheal0424.
    July 19, 2015 at 9:47 pm #475468
    Micheal0424

    #header_main_alternate { background-color: #272782; }

    This solved my full width color issue.

    How do I make the navigation bar larger?

    Thank you.

    July 20, 2015 at 12:44 pm #475737
    Ismael

    Hi!

    Thank you for using Enfold.

    You can try this css code:

    .html_header_top.html_logo_center .main_menu ul:first-child {
  width: 100%;
}

.av-main-nav > li {
  width: 16.22%;
}

    Regards,
    Ismael

    July 20, 2015 at 4:21 pm #475915
    Micheal0424

    Maybe I wasn’t good at explaining.

    I would like the menu area to be larger, the blue area.

    I would like the blue area to be taller, the way it is now with the fonts being larger there is not much room on the top and bottom of the fonts.

    How do I make the blue menu area taller?

    Thank you.

    July 21, 2015 at 5:41 am #476298
    Rikard

    Hi!

    Please try the following CSS:

    #header_main_alternate {
padding: 20px;
}

    Best regards,
    Rikard

    July 21, 2015 at 7:37 am #476324
    Micheal0424

    That works, it makes the blue area taller…thank you.

    The only issue now is that the slider below it is partially covered on the top. Is it possible to have the content area start at the bottom of the menu area now so the menu area doesn’t overlap the slider or content area?

    Thank you very much for your help.

    July 21, 2015 at 12:54 pm #476439
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main {
  padding-top: 216px;
}

    Regards,
    Yigit

    July 27, 2015 at 3:39 am #478865
    Micheal0424

    That worked perfectly, thank you!!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Main navigation are larger and solid background all the way across?’ is closed to new replies.