Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 16, 2016 at 1:26 am #566352
    vailjazz

    Hi,

    I am having a really frustrating time with various mobile break points for font sizes so that my menu items don’t bump down onto a separate line. If there is an easy solution please stop me here.

    What I’ve noticed is that there is a general CSS rule for .container that applies a 50px padding to left and right, which works just fine for my header. What I want to do is get rid of this padding ONLY FOR MY NAVBAR/MENU. When I test this out using Chrome it solves all of my text sizing issues right off the bat.

    I’ve tried a variety of #header_main_alternate > .container to get rid of the padding in my custom CSS, using the divs before both, either and neither of these elements. None of these solutions works. Can you please help me get rid of this padding!?

    Thanks,

    Christin

    • This topic was modified 8 years, 10 months ago by vailjazz.
    January 16, 2016 at 2:40 am #566367
    Elliott

    Hey vailjazz!

    There is an option in Dashboard > Enfold > Header > Mobile Menu for getting the mobile menu to activate at 990px for tablets. You can also use CSS to make it activate on larger screens like so.

    @media screen and (max-width: 1100px) {
nav.main_menu { display: none !important; }
#advanced_menu_toggle { display: block !important; }
}

    Best regards,
    Elliott

    January 16, 2016 at 3:04 am #566376
    vailjazz

    I don’t want the mobile menu to activate at a higher device breakpoint, I just want to get rid of the 50px padding on either side of the menu div.container. Is this possible?

    January 17, 2016 at 4:59 am #566705
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #header .container {
    padding: 0px 0px !important;
}

    Best regards,
    Rikard

    January 19, 2016 at 6:31 pm #568027
    vailjazz

    That wasn’t quite it (took away padding from all of header area) but with a little tweak it works great: #header_main_alternate > .container { padding: 0px 0px !important; }

    Thanks!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Remove container padding only on menu’ is closed to new replies.