How do you center menu on MOBILE ?

TheKingofBranding · December 2017

I need to center the menu on MOBILE.

I found this CSS in the discussions but it does NOT work for me:

@media (max-width:767px) {
#Top_bar #menu ul li a {
text-align:center !important;
}
}

*Maybe its because I am using this html you gave me in a previous message :

<img src="URL TO IMAGE" />

or because I am using this CSS you also gave me:

#Top_bar {
	background: url('URL TO IMAGE') !important;
}

Please let me know - Thanks !

Bryan · December 2017

Hi,

you can use this custom css

@media only screen and (max-width: 1239px) {
#Top_bar #menu > ul {
    text-align: center !important;
}}

thanks

TheKingofBranding · December 2017

Awesome- thanks very much.

TheKingofBranding · December 2017

Sorry to come back to you on this...but the CSS only works when clicking the "HOME" button on mobile. This CSS does not keep the menu centered all the time. If you test it yourself- make sure you test on a mobile device. Please see the link to the screenshot below

http://prntscr.com/hiyrru

TheKingofBranding · December 2017

is it possible to review today ?

Thanks

Bryan · December 2017

We have tested it once again, and it is centered on every page, what you can see on the screenshot below:

https://prnt.sc/hjczu3
https://prnt.sc/hjczy6

TheKingofBranding · December 2017

OK, thats weird. Its not showing up on my phone that way. Now by looking at thescreenshots you sent me- I now have to fix the MOBILE version because that solid color bottom does not look correct on the MOBILE version. Any suggestion ? The DESKTOP version looks good but NOT the MOBILE....

Actually- Id like the BRICK tile to be higher up and more of the SOLID COLOR. But the dekstop version looks good now. Is there a way I can change the MOBILE HEADER but not the desktop ?

Bryan · December 2017

You would have to give us an visualization of what you want to exactly achieve. We do not quite understand how the mobile version would look like.

TheKingofBranding · December 2017

Like this: http://prntscr.com/hjhfn2

Bryan · December 2017

We can only do this, try this css

@media (max-width: 767px) {
#Top_bar #menu > ul {
    background-color: white !important;
}}

TheKingofBranding · December 2017

Perfect- it seemed to have worked !

Thanks

How do you center menu on MOBILE ?

Comments