Title: how Center Menu Last modified: August 22, 2016 --- # how Center Menu * Resolved [Renodor](https://wordpress.org/support/users/renodor/) * (@renodor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/) * 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](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644036) * 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](http://codex.wordpress.org/Child_Themes) or add it in your site using the following plugin: * [http://wordpress.org/plugins/simple-custom-css](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](https://wordpress.org/support/users/renodor/) * (@renodor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644038) * 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/](http://www.projetsource.com/quest-ce-que-cest/) * thank you for helping * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644047) * 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](https://wordpress.org/support/users/renodor/) * (@renodor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644055) * It seems to work perfectly! * Thank you very much! * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644058) * Glad I could help 🙂 * Cheers, Bojan * [Pidor](https://wordpress.org/support/users/pidor/) * (@pidor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644330) * Hello, * the code doesn’t work for me 🙁 when I use it [this](http://goo.gl/rplGYE) happens. * Otherwise, it’s like [that](https://www.dropbox.com/s/ja7hb5u4bbmq68o/Menu.PNG?dl=0). 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](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644331) * 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](https://wordpress.org/support/users/pidor/) * (@pidor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644332) * 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](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644333) * 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](https://wordpress.org/support/users/pidor/) * (@pidor) * [11 years, 4 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644334) * 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](https://wordpress.org/support/users/asnivor/) * (@asnivor) * [10 years, 5 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644396) * 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](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. * ![](https://i0.wp.com/themes.svn.wordpress.org/moesia/1.54/screenshot.png) * Moesia * [Support Threads](https://wordpress.org/support/theme/moesia/) * [Active Topics](https://wordpress.org/support/theme/moesia/active/) * [Unresolved Topics](https://wordpress.org/support/theme/moesia/unresolved/) * [Reviews](https://wordpress.org/support/theme/moesia/reviews/) * 11 replies * 4 participants * Last reply from: [asnivor](https://wordpress.org/support/users/asnivor/) * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/how-center-menu/#post-5644396) * Status: resolved