Posted by dead dred on Thu, May 02, 2019 - 12:20am

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

Thu, May 02, 2019 - 4:27am by laryn

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;

}

Thu, May 02, 2019 - 8:16am by dead dred

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;

}

 

Thu, May 02, 2019 - 10:24am by laryn

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

Thu, May 02, 2019 - 10:32am by dead dred

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

Thu, May 02, 2019 - 10:31am by dead dred

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;

}
}