how Center Menu

Resolved Renodor
(@renodor)

11 years, 4 months ago

Hello,

just another question, how to center the menu? By default it is align on the right…

I removed the “site-branding” by adding this line :

.site-branding {
display: none;
}

then tried to center adding this :

.main-navigation {
width: 100%;
text-align: center;
}

But it desperately stayed on the right…

Thank you for your help!

Viewing 11 replies - 1 through 11 (of 11 total)

Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years, 4 months ago
Hey there Renodor,

Hope you’re well today!

This could be done with some custom CSS. Try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin:

http://wordpress.org/plugins/simple-custom-css
```
.main-navigation ul {
float: none;
}
```
This should center the navigation.

Hope this helps 🙂

Best regards,
Bojan
Thread Starter Renodor
(@renodor)

11 years, 4 months ago

Hello,

thank you for your answer, but when I add your css it actually put my menu on the left, and not on the center…

You can check yourself here:

http://www.projetsource.com/quest-ce-que-cest/

thank you for helping
Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years, 4 months ago
Hey again Renodor,

Please replace the code I gave you with the following:
```
.main-navigation ul {
float: none;
margin-left: auto;
margin-right: auto;
width: 390px;
}
```
Please let me know if this works 🙂

Cheers,
Bojan
Thread Starter Renodor
(@renodor)

11 years, 4 months ago

It seems to work perfectly!

Thank you very much!

Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years, 4 months ago

Glad I could help 🙂

Cheers,
Bojan

Pidor
(@pidor)

11 years, 4 months ago

Hello,

the code doesn’t work for me 🙁 when I use it this happens.

Otherwise, it’s like that. So I basically would like to center it but also to use the whole space of the screen so that it doesn’t display in two lines.

Would it be possible?

Thanks a lot in advance for your answer 🙂

Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years, 4 months ago

Hey there Pidor,

Hope you’re well today!

That happens because of the width property set to 390px, try to increase it until your menu is in one line.

If that doesn’t help could you please post link to your site so I can take a look?

Best regards,
Bojan

Pidor
(@pidor)

11 years, 4 months ago

Hey,

thanks a lot for this really quick answer! Unfortunately my site is on localhost for now…

I actually tried to set “width” to “100%” or “auto” but it doesn’t help. And if I put for instance 1000 px I guess I’ll have a problem if the screen is smaller than that…

Sorry I can’t give you any more information… 🙁
Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years, 4 months ago
Hey Pidor,

You could try also try to reduce the padding between the menu items on op of increasing the width of the whole menu. To do that add the following code:
```
.main-navigation li {
padding: 40px 10px;
}
```
Second numeric value (10px) represents 10px padding on left and right, reduce it so you get more space and try to fit in your menu items. You could also try to reduce any padding or margins on your logo if you’re using one.

It’s really hard for me to provide correct CSS if I can’t inspect the your page 🙁

Hope this helps.

Best regards,
Bojan
Pidor
(@pidor)

11 years, 4 months ago

Yeah, I understand. Ok don’t worry, I’ll figure it out. I was workink well until recently so I should be able to have it on one line again 😉 Thanks anyway!
asnivor
(@asnivor)

10 years, 5 months ago
So this has been marked as resolved but I have still been fighting with a reliable way to center the top-menu when site-branding has been set to display: none; for ages now.

With the help of this page I think I have finally cracked it:

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

In case anyone visits here looking for an answer, this is what works for me (placed in custom-css):
```
.main-navigation {
   float:left;
   width:100%;
   overflow:hidden;
   position:relative;
}
.main-navigation ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;

}
.main-navigation ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
padding: 10px 10px;
}
```
Hopefully this might help someone.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘how Center Menu’ is closed to new replies.