Moving menu bar

jswiftinfo · Member · Jan 5, 2015 at 1:30 am
Copy link

Add topic to favorites
Hi. I am currently using the AutoFocus theme, and I wanted to see if it was possible to move the menu bar. I want to make it horizontal and in the center. Is this possible?

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jan 5, 2015 at 1:36 am
Copy link
So have your purchased the premium upgrade bundle or not? With it you can edit the CSS but without it you cannot edit it.

Premium bundle details http://store.wordpress.com/plans/premium/

Custom design – Frequently Asked Questions
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/
if you have the upgrade use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can copy and paste your text into a thread that will appear in the CSS Forum where you will get the help you need.

Every theme has detailed them description page with set up instructions. You have private blog. We Volunteers cannot view it and do not know which theme you are using and provide the link to the detailed theme description page and live demo site. Only Staff can view private blogs.
jswiftinfo · Member · Jan 5, 2015 at 1:57 am
Copy link
I do have the premium bundle. And the site is now available to see.
frisiteg · Member · Jan 5, 2015 at 2:17 am
Copy link
This is possible if you have upgraded your theme to enable custom design.

If you have done this you should be able to adjust in CSS where the menu bar is.

What you will want to is the following: You will change the header width to 100%.
```
#header {
      width: 100%;
}
```
Then you will go to your list items and change your width to auto and the change the display to inline-block.
```
div.menu li {
      width: auto;
      display: inline-block;
}
```
Finally, to center the whole operation, you will want to go to your unordered list element and add text-align center.
```
div.menu ul {
      text-align: center;
}
```
Once you have it centered you can adjust the padding between words if you would like. But this is the simplest way to move that menu. If you do not have access to the CSS customization you will not be able to insert and change this code.
frisiteg · Member · Jan 5, 2015 at 2:19 am
Copy link
Oops! I missed one!

You will want to change the width of the menu to 100% as well.
```
div.menu {
      width: 100%
}
```
This will allow the menu to actually center.
jswiftinfo · Member · Jan 5, 2015 at 2:38 am
Copy link
Thank you so much, I really appreciate your help. Can you just tell me where to go to find the menu information in the CSS?
jswiftinfo · Member · Jan 5, 2015 at 4:50 am
Copy link
I tried this and it’s looks exactly the same but it’s on the left and it’s not center or horizontal. Any more tips?
rachelmcr · Member · Jan 13, 2015 at 11:51 am
Copy link
@jswiftinfo — You can use the tips in our guide for How to Find Your Theme’s CSS to find the CSS used for that menu in your theme.

If you’d like more CSS help, the best place to post is in the CSS Customization forum. The expert staff and volunteers in that forum can help you learn more about CSS and customize your site the way you’d like it. :)

No items found.