0

Hey lets talk about on changing my header and top menu width to the same width as my nav and main wrapper? Everything in the middle is what I can say.

Here’s my site: http://soccer-mate.com

Picture: http://imagizer.imageshack.us/v2/320x240q90/924/fAPEnE.jpg

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; }

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;
}

Original CSS:

/* Structure */
#wrapper             { min-height: 100%; position: relative; padding: 20px 0; }
#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; }

/* Menus */
.sf-menu, .sf-menu *  { list-style: none; margin: 0; padding: 0; }
.sf-menu  { line-height: 1; }
.sf-menu ul  { position: absolute; left: -999em; width: 11em; z-index: 100; }
.sf-menu ul li  { width: 100%; }
.sf-menu li:hover  { visibility: inherit; }
.sf-menu li  { float: left; position: relative; }
.sf-menu a  { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul  { left: 0; top: 2.8em; z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul  { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul  { left: 11em; top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul  { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul  { left: 11em; top: 0; }
.sf-shadow ul { background: url(../images/shadow.png) no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; }
.sf-shadow ul.sf-shadow-off { background: transparent; }

#top-menu, #nav  { min-width: 990px; }
#top-menu-content, #nav-content  { margin: 0 auto; width: 978px; }
#top-menu-content .sf-menu, #nav .sf-menu  { float: left; line-height: 1.1; }

.quick-nav  { float: right; list-style: none; margin: 0 10px 0; padding: 0; }
.quick-nav li  { float: left; display: inline; }

/* Search Bar */
#searchbar  { float: right; overflow: hidden; margin: 25px 10px 0 0; }

HTML:

#main {
    width:960px;
    margin:0 auto;
    position:relative;
}

#container {
    width:660px;
    float:left;
}

#content {
    margin:0;
    width:660px;
    overflow:hidden;
}

.main-aside {
    width:300px;
    float:right;
    position:relative;
}

#secondary {
    clear:right;
}

#subsidiary {
    width:960px;
    margin:0 auto;
    overflow:hidden;
}

#subsidiary .aside {
    width:300px;
    float:left;
    margin:0 20px 0 0;
}

#subsidiary #third {
    margin:0;
}

#main .module, #main .single-post {
    margin-right: 10px;
}

.fixed {
    width:960px; 
    margin:0 auto;
}

Thanks in advance.

41 72 6c
  • 1,600
  • 5
  • 19
  • 30
Tim Dickson
  • 1
  • 1
  • Provide full code, which means including your HTML – Gustaf Gunér Jul 07 '17 at 06:31
  • 1
    Questions seeking help ("why isn't, or how to make, this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: https://stackoverflow.com/help/mcve – Guillaume Jul 07 '17 at 06:31
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the [How to Ask](https://stackoverflow.com/help/how-to-ask) page for help clarifying this question. – viCky Jul 07 '17 at 06:43
  • Would you be opposed to wrapping all the elements that make up the main content inside the body in a container div ? Then you could set the width on the container element (position relative) and set all the children elements to 100% width. – K.F Jul 07 '17 at 09:17

0 Answers0