Hello!
I’m trying to make the main navigation a bit smaller (width wise) on laptop devices but can’t find the correct CSS selector to do so. Could someone please help out with this. Thanks, you guys are the best!
Hey bobfurgo,
Please try the following in Quick CSS under Enfold->General Styling:
.main_menu li {
margin: 15px !important;
}
Best regards,
Rikard
Hi Rikard!
I believe that would bring the menu links closer together. I’m trying to make the entire side navigation smaller in width on laptop screens.
Thank you!!
Hi!
You have following custom CSS code
.main_menu li {
padding: 0px 0px !important;
margin: 85px 0 85px 0 !important;
}
please change it to following
@media only screen and (min-width: 1025px) {
.main_menu li {
padding: 0px 0px !important;
margin: 85px 0 85px 0 !important;
}}
Cheers!
Yigit
Hi Yigit!
Thanks for the quick reply. I don’t think i’m articulating my question well enough, sorry about that. I want the entire width of the side nav smaller, when I say this i’m actually referring to the dark grey background area. Hopefully this makes it a bit clearer!
Thanks!
Hi,
Try using this css code:
@media only screen and (max-width:1440px) and (min-width:1025px) {
html.html_header_sidebar #wrap_all {
background-color: #ededed;
}
.html_header_left #top #header {
width: 260px;
}
}
Hope this helps :)
Best regards,
Nikko