centered main menu on desktop, looked bad on mobile

Hi,

I’m trying to center main menu on newsmag head style 7 with these code:

.td-header-style-7 .sf-menu {
display: table;
float: none;
margin-left: auto;
margin-right: auto;
}

it worked, but when I checked on mobile… it looked like this

http://www.screencast.com/t/tZ3gYy7cqfaB

can you help me?

here’s the url http://www.bukusakumama.com/

thanks

Hi

Try using media queries to make the css only for mobile and tablets. The code should look like this:

@media(min-width: 768px){
.td-header-style-7 .sf-menu {
display: table;
float: none;
margin-left: auto;
margin-right: auto;
}
}

Thanks!

Hi,

How about making it only centered on desktop but leave it like normal on mobile?

the menus stay inside the megamenu on mobile.

I’m trying to be creative and tried

.td-header-style-7 .sf-menu {
display: table !important;
float: none;
margin-left: auto;
margin-right: auto;
}

@media(min-width: 768px){
.td-header-style-7 .sf-menu {
display: none;
float: none;
margin-left: auto;
margin-right: auto;
}
}

and doesnt work :p

Hi

Sorry for that, I’ve made a mistake.
Replace the above code with this one, it will make the menu centered only for desktop and tablets:

@media(min-width: 768px){
.td-header-style-7 .sf-menu {
display: table !important;
float: none;
margin-left: auto;
margin-right: auto;
}
}

Thanks!