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?

 

Accepted answer

I think you may just need to add a float: none; in your media query, maybe?

Try changing this:

.js .menu-dropdown > li {

    float: left;

}

to this:

.js .menu-dropdown > li {

    float: none;

    display: inline-block;

}

And this:

.l-header .menu, .l-header .menu > li {

    text-align: left;

}

to this:

.l-header .menu, .l-header .menu > li {

    text-align: center;

}

Comments

I think you may just need to add a float: none; in your media query, maybe?

Try changing this:

.js .menu-dropdown > li {

    float: left;

}

to this:

.js .menu-dropdown > li {

    float: none;

    display: inline-block;

}

And this:

.l-header .menu, .l-header .menu > li {

    text-align: left;

}

to this:

.l-header .menu, .l-header .menu > li {

    text-align: center;

}

Thanks for the samples but same thing is happening as before.

The desktop version works but it also affects the mobile version of the menu where the  LI is centered and not stacked.

I tired using media query to see if I can just make it for desktop but I can't for some reason override the following

 

.l-header .menu, .l-header .menu > li {

    text-align: center;

}

 

Is the media query lower down in the CSS file than the code you posted above?

I put it at the bottom of the last CSS. I guess I should add my own css file to make things a little easier to remember what I did and when lol

Ok this is what worked :)

 

@media (min-width: 48em) {
 
.l-header .menu, .l-header .menu > li {

    text-align: center;

}

 .js .menu-dropdown > li {

    float: none;

    display: inline-block;

}
}