Activating Mobile Menu Sooner

Hi,

I'm close to being done with my header/menu but I still have a problem with the way it looks around 1200px and lower before it switched to the mobile menu.

How can I trigger the mobile menu sooner so that when the main menu collapses, it automatically switches to the mobile one with the sticky menu toggle? (left menu button that scrolls with the user)


For reference, here's the custom CSS I'm using to make the header area function on a desktop before the menu collapses and after it's switched around 768px.

body:not(.template-slider) #Header { min-height: 300px; }
body:not(.template-slider) #Top_bar { margin-top: 165px; background: rgba(255, 255, 255, 0.5); height: 60px; }
body:not(.template-slider) #Top_bar.is-sticky { margin-top: 0px; }
.image_frame .image_wrapper .mask:after { display: none; }
.image_frame .image_wrapper .image_links { display: none; }
@media only screen and (min-width:768px) { .logo-main { display: none !important; } }
@media only screen and (min-width:768px) { .logo-sticky { display: none !important; } }
@media only screen and (max-width:768px) { body:not(.template-slider):not(.header-simple) #Header { min-height: 0px !important; } }
@media only screen and (max-width:768px) { body:not(.template-slider):not(.header-simple) #Top_bar { margin-top: 0px !important; } }
#logo { margin-top: -20px !important; }
.menu_wrapper { margin-left: -45px; }



Comments

Sign In or Register to comment.