WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Menu bar again (5 posts)

  1. anoctave
    Member
    Posted 1 year ago #

    This is referencing "move main menu bar to banner" post.

    I put the navigation bar back in it's place in the header. But I'm not getting what I want.

    Here is my site

    You'll see that I have placed a dark gray border at the top of the page and a background color and graphic underneath. And you'll see "Sample Page" in white at the bottom of the blue area.

    What I want is main navigation to be a band of grey #7e7e7e running the full width of the screen starting right under the header picture with the links in white. I have not been able to accomplish that.

    I would also like to change the color of the banner background because it is the same color that i want for the menu band.

    I hope you can help me out with this.

    Thanks.

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    The site uses a 12 column grid. You've currently got your site title in the left 5 columns and the main nav in the right 7 columns (ie. 5+7=12).

    You need to move the nav from the <div class="col grid_7_of_12"> container and add it to it's own row (or div), that extends the full width of the page (ie. width: 100%). Ideally, you'd put this div after the <header> container. You'd then add your background image & color to #headercontainer rather than where you've got it at the moment, on #masthead.

    Also, at the moment, you've changed the left margin on your header container, to zero. The default theme had this set as auto (on the .site-header class). All this has done is move the header area to the left, but it's still only 1200px wide. If you want it to extend the full width, you need to change .site-header to remove the max-width and make the width 100% (instead of it's current 90%).

  3. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    If you haven't done so already, I highly recommend installing the Firebug add-on for Firefox. It'll enable you to see more clearly, how wide your containers are, where they line up and what margins and/or padding they have.

    Alternatively, if you prefer Chrome, use the built in Chrome Developer Tools to see the same sort of information.

  4. anoctave
    Member
    Posted 1 year ago #

    Wow, thank you for the answer. Thank you for the lesson. The multi-device functionality really makes things more complicated.

    Ok, I'm off to zero in on the code.

    With so much to learn, I'm sure I'll be back.
    Thank you for your help and your patience.

  5. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    No probs :-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags