WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Put Header and Menubar in Center? (3 posts)

  1. Yet Another WP User
    Member
    Posted 1 year ago #

    Hello everyone

    Currently I'm using a custom build theme for my wordpress blog which is a fixed width theme and shows header, menubar (navbar) and body content in same width.

    Now I want to make header and menubar full width similar to what this wordpress official forum has. It shows wordpress.org logo and menus in center but the background is showing in full width.

    Same thing I want to do with my theme. The body part should be fixed width but header and menus should be 100% width.

    How to do it? I'm using a Wrapper to show everything such as header, menubar, body content, etc.

    It starts as following:

    =========
    <html>
    <head></head>
    <body>
    <div id="wrapper">
    
    <div id="header"></div>
    <div id="navbar"></div>
    
    <div id="content">
    <div class="post">
    </div>
    </div>
    
    <div id="footer"></div>
    
    </div>
    </body>
    </html>
    =========

    If I put <div id="wrapper"> after <div id="header"> and <div id="navbar"> closes, it makes header and menubar full width but it shows them in left of screen. I want to show them in center.

    In style.css, wrapper is as following:

    #wrapper {
    margin:auto;
    width:990px;
    background:#FFF;
    }

    Any kind of help will be highly appreciated. Please do let me know if I need to provide any other information.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hello, can you try this CSS;

    #navbar ul {
     display: table;
     margin: 0 auto;
    }

    Further reference http://ronangelo.com/the-easiest-way-to-center-a-menu/

  3. Yet Another WP User
    Member
    Posted 1 year ago #

    ^^ Thanks. It worked. :)

Topic Closed

This topic has been closed to new replies.

About this Topic