I'm having issues centring the main menu in Basis theme. So I can actually center it if I override the following css
In skin.css change
.l-header .menu, .l-header .menu > li {
text-align: left;
}
to
.l-header .menu, .l-header .menu > li {
text-align: center;
}
and in menu-dropdown.css (truncated for here)
@media (min-width: 48em) {
.js .menu-dropdown > li {
display: inline-block;
}
}
The problem I'm having is that the css below in skin.css controls the alignment of both the desktop and mobile versions of the menu. So the mobile menu gets all messed up.
.l-header .menu, .l-header .menu > li {
text-align: left;
}
So thought I could do the following and have it only affect the desktop menu but it wont override for some reason.
@media (min-width: 48em) {
.l-header .menu, .l-header .menu > li {
text-align: center;
}
}
Am I missing something here?
I think you may just need to add a float: none; in your media query, maybe?
Try changing this:
to this:
And this:
to this: