Moving menu bar

  • Author
    Posts
  • #2200576

    jswiftinfo
    Member

    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 iamjswift.com.

    #2200673

    timethief
    Member

    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.

    #2200678

    jswiftinfo
    Member

    I do have the premium bundle. And the site is now available to see.

    #2200682

    frisiteg
    Member

    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.

    #2200684

    frisiteg
    Member

    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.

    #2200686

    jswiftinfo
    Member

    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?

    #2200702

    jswiftinfo
    Member

    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?

    #2200839

    rachelmcr
    Staff

    @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. :)

The topic ‘Moving menu bar’ is closed to new replies.