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


#1

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


#2

Hi,

Can you share your site URL here?


#3

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

#4

Try the following CSS code

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

Regards,
Awan


#5

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,


#6

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;
 }
}

#7

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


#8

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;
 }
}

#9

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


#10

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?