-2

I'm trying to centre the menu on my Wordpress site with CSS:

http://thewholesomebakery.co.uk/

I'm aware that I have to remove float:left; but then solutions seem to vary from theme to theme.

Can anyone help me out with this?

Gautam Rai
  • 2,445
  • 2
  • 21
  • 31
MLB_27
  • 39
  • 1
  • 3
  • 11
  • Possible duplicate of [How to center a navigation bar with CSS or HTML?](https://stackoverflow.com/questions/5995405/how-to-center-a-navigation-bar-with-css-or-html) – FluffyKitten Aug 30 '17 at 20:08
  • Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](https://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Aug 30 '17 at 20:17

3 Answers3

0

You can remove the float and add margin: auto;. The page of the w3c about centering things is an absolute must-read for any web developper.

koko
  • 13
  • 3
0

Change your css to:

.site-bar .nav {
    float: left;
    width: 100%;
    padding-top: 3px;
    text-align: center;
}

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

that should center the top navigation!

VA79
  • 474
  • 3
  • 7
0

Use this css:

.site-bar .nav { 
    width: 100%;
    float: none; 
    text-align: center; 
}

.navigation > li { 
    float: none;
    display: inline-block;
}
dhorelik
  • 1,477
  • 11
  • 14
Balwant
  • 745
  • 1
  • 7
  • 13