How to get the list of the menu in the center on mobile

Hi there,
I followed your advice to get the button menu on tablets & mobile next to the logo


and it looks great.
However, the list of the menu is hidden in the far right
Capture%20du%202018-11-30%2019-24-53

Please can you help?

Best regards,
Seve

Hi,

Can you share your site URL here?

Hi Awan

  thanks for your fast replay.

  I'm working on localhost, but tell me what code you need, I'll send it to you

  Best regards

Try the following CSS code

#mainnav-mobi ul > li > a {
    text-align: center;
}

Regards,
Awan

Hi Awan,
alas, no change.
Here is all the code for this mobile menu:

_`@media only screen and (max-width: 1024px) {_

_ #masthead div.col-md-4.col-sm-8.col-xs-12 {_
_ float: left;_
_ width: auto;_
_ max-width: 60%;_
_ padding-left: 40px;_
_ padding-top: 10px;_
_ padding-bottom: 10px;_
_ }_

_ #masthead div.col-md-8.col-sm-4.col-xs-12 {_
_ float: right;_
_ width: auto;_
_ padding-right: 40px;_
_ padding-top: 30px;_
_ }_

_ #masthead {_
_ padding: 0;_
_ }_
}

@media only screen and (max-width: 780px) {
_ #masthead div.col-md-8.col-sm-4.col-xs-12 {_
_ padding-top: 5px;_
_ }_
}

#mainnav-mobi ul > li > a {
_ text-align: center;_
}
`
Please can you correct it where necessary?
Thanks a lot
Best regards,

Hi,

Why is there much underscore in your code?.

Anyway, here is to make the menu centered:

#mainnav-mobi {
    position: absolute;
    top: 150px;
    left: 0;
}
@media only screen and (max-width: 780px) {
 #masthead div.col-md-8.col-sm-4.col-xs-12 {
	position: initial;
 }
}

Hi Awan,
that’s nearly good, thanks a lot !
However there is a gap between the header and the menu…!Capture%20du%202018-12-06%2015-19-06

so I wrote this:
@media only screen and (max-width: 780px) {
#mainnav-mobi {
top: 48px;
}
#masthead div.col-md-8.col-sm-4.col-xs-12 {
position: initial;
}
}
but the position of the mainvav-mobi will be different on various mobiles.
Is there a better way to position it please?

Best regards

Hi,

Try to use this code instead please:

#mainnav-mobi a {
    text-align: center;
}
@media (min-width: 768px) {
 #masthead div.col-md-8.col-sm-4.col-xs-12 {
	position: initial;
 }
 #mainnav-mobi{
 	top: 145px;
 	left: 0;
 }
}

Sorry Awan,
it doesn’t make it better, actually with this code the menu is similar that at the beginning of this topic ;(

Hmm, the code is work in my site.

Its better if you publish your site, so I can check directly for further investigation.

Could you please to share the screenshot of your menu after you are using my code?