Center navigation top menu .. mobile is off.. ?

[endlessxpressions]

So I wanted to center the top navigation on the top menu categories. Which I accomplished by putting the following code in the global CSS

ul.sf-menu {text-align:center;}

ul.sf-menu li {

float:none;

display:inline-block;

}

ul.sf-menu li ul {

float:left;

text-align:left;

display:inline-block;

}

 

BUT now the mobile version is all screwed up and I can't figure out how to get the mobile version back to the original.

I only wanted it centered on the desktop

 

Anyone guide me as to how to accomplish this?

Version 1.6 default template

 

Also the spacing on the desktop subcategories is way to close and I cannot for the life of me get spacing and padding correct in the desktop version.

 

Endlessxpressions.com is our site

[Knowband Plugins]

Try adding media queries and add the above CSS inside a condition so that it gets used when you open on desktop only.

 

@media (min-width: 720px) {

--

YOUR CSS CODE

--

}

[endlessxpressions]

Tried that, makes the mobile version worse and non responsive

[endlessxpressions]

From the looks of it the issue is with the subcategory alignment.

Whenever I add the second code (to align left instead of center) on the subcategories, it makes the mobile all crazy.

 

What I wanted was for the main links to be center, sublinks to be left and mobile to stay as original.