[Theme:The Gossip] Centering Header & Main Navigation

  • Resolved kkeach

    (@kkeach)


    11 years, 6 months ago

    https://www.coachaina.com

    I’m trying to center the header logo and Main body navigation and I’ve tried so many different things in CSS to no avail.

    I think I go the header logo to work with using this:

    #logo {
float: none;
text-align: center;
margin: 0-auto;
}

    But I’m not sure if that’s accurate.

    However, I still need help with the main navigation bar.
    I’ve read other forums discussing this and have tried to mimic using the element names my theme uses, but still can’t get it to work.
    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter kkeach

    (@kkeach)

    I currently don’t have that header code added because I’m waiting until I know how to do the Navigation bar. Also, please let me know if the css code for the header is accurate regardless if it just appears to work for me. Thanks!

    For the logo use this code

    #logo {
float: none;
text-align: center;
}

    And for the menu

    #body-nav.nav {
max-width: 900px;
margin: 0 auto;
clear: both;
float: none;
}

    Add these to the <head> section so that it overrides the external stylesheet.

    Thread Starter kkeach

    (@kkeach)

    Thank you for your quick response jesin.
    Quick Question.
    This theme is responsive and moves depending on browser width. Is setting the max-width at 900px going to restrict the way the responsive theme is made to work?

    Thread Starter kkeach

    (@kkeach)

    I tested that code quickly then removed it. It does center the navigation bar but there is no space at the bottom of it before the body content. It’s butted right on the image. I didn’t test for responsive ability as I don’t have all sizes to do that with.

    No it does not that is the difference between width and max-width.

    When you use max-width: 900px you are saying “This element can extend to a maximum width of 900px and not more”.

    The opposite of this is min-width – “This element can shrink upto X pixels only and not any less”

    As for the content sticking to the menu use the following CSS

    #menu-body-nav-1.menu {
    margin-bottom: 30px;
}

    Modify the margin bottom according to your needs.

    Thread Starter kkeach

    (@kkeach)

    Thank you so much for explaining to me how the width works. I appreciate that.

    Also, I added that last bit to my CSS sheet and it works!

    Thank you so much.

    You’re most welcome.

    Always glad to help ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme:The Gossip] Centering Header & Main Navigation’ is closed to new replies.