This topic has 5 replies, 2 voices, and was last updated 7 years, 10 months ago ago by 8theme
I have added the below code into my website and for some reason the menu size will not go smaller on this media screen no matter what.
Hi i’m trying to do when you resize the window to make the menu not stack. Just want it to go smaller and centre.
Please help I even pasted the code into the styling media screen css and that didn’t work either.
@media screen and (max-width: 991px) {
.menu-wrapper .menu > li > a, .mobile-menu-wrapper .menu > li > a, .mobile-menu-wrapper .links li a, .secondary-menu-wrapper .menu > li > a, .secondary-title {
font-size: 15px!important;
line-height: 15px !important;
}
.navbar-header {
margin-right: 46px !important;
}
}
Hello,
Try to add this code to the media query also
.menu-wrapper {
display:block!important;
}
Regards
Hi there, I have created you logins if you can have a look why my css code doesn’t work on appearance editor for media screens? I just want the main menu not to stack when making the browser window smaller?
If you can please take a look that would be greatly appreciated.
See below.
NEVER MIND I SOLVED IT BY USING THE BELOW CODE.
Thanks.
.header-xstore .navbar-header {
width: 125px !important;
}
.header-xstore .header-logo {
width: 125px;
}
Great, you are welcome 🙂
The issue related to '‘Menu stacking on different media screens – CSS not applying.’' has been successfully resolved, and the topic is now closed for further responses