Custom Header and Menu Width?

  • Tim

    (@tdranger)


    8 years, 11 months ago

    Can I get some help on making my header and top menus the same width as my main wrapper?

    Here’s my site: soccer-mate.com
    Here’s what I have as custom CSS so far:

    /* Structure */
    #wrapper { min-height: 100%; position: relative; padding: 0.5px 0 20px; }
    #main { padding: 10px 10px 0; }

    /* Header */
    #header { min-width: 990px; padding: 0; }
    #branding { width: 980px; margin: 0 auto; padding: 0; }
    .logo { max-width: 590px; float: left; padding: 30px 0 34px 10px; }
    .blog-name { margin: 0 0 3px; line-height: 1em; display: block; }
    .blog-description { line-height: 1em; display: block; margin: 0; padding: 3px 0 0; }

    #top-menu, #nav { min-width: 990px; }
    #top-menu-content, #nav-content { margin: 0 auto; width: 978px; }

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Konstantinos Xenos

    (@xkon)

    8 years, 11 months ago

    If you want everything to get in the middle and have your background shown as in your main content please try this.

    
#top-menu {
    min-width: auto !important;
    max-width: 980px !important;
    margin: auto  !important;
}

#header {
    position: relative !important;
    min-width: auto !important;
    padding: 0 10px 0  !important;
    max-width: 960px  !important;
    margin: auto  !important;
}

#nav {
    min-width: auto !important;
    max-width: 982px !important;
    margin: auto !important;
    border-bottom: 1px solid #CCC  !important;
}

#mega-menu-wrap-top-menu {
    clear: both !important;
    min-width: auto !important;
    max-width: 980px !important;
    margin: auto !important;
}

    Best regards,
    Konstantinos

    Thread Starter Tim

    (@tdranger)

    8 years, 11 months ago

    Thanks so much man, we got it!

    Konstantinos Xenos

    (@xkon)

    8 years, 11 months ago

    No problem buddy.

    Best regards,
    Konstantinos

    Thread Starter Tim

    (@tdranger)

    8 years, 11 months ago

    Actually if you look at the header it’s not the same width as the rest of the site but it’s very close.. @xkon

    • This reply was modified 8 years, 11 months ago by Tim.
    Thread Starter Tim

    (@tdranger)

    8 years, 11 months ago

    Please a little assistance with this.. Im so very close to getting the header the same width of the nav and top menu..

    This is so close to being correct:

    #top-menu {
    min-width: auto !important;
    max-width: 980px !important;
    margin: auto !important;
    }

    #header {
    position: relative !important;
    min-width: auto !important;
    padding: 0 10px 0 !important;
    max-width: 960px !important;
    margin: auto !important;
    }

    #nav {
    min-width: auto !important;
    max-width: 982px !important;
    margin: auto !important;
    border-bottom: 1px solid #CCC !important;
    }

    #mega-menu-wrap-top-menu {
    clear: both !important;
    min-width: auto !important;
    max-width: 980px !important;
    margin: auto !important;
    }

    Thanks in advance.

    • This reply was modified 8 years, 11 months ago by Tim. Reason: Almost resolved
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom Header and Menu Width?’ is closed to new replies.