0

I am adding a 3rd navigation bar to my wordpress site. I have the coding done so it appears but for some reason when i style it, the new nav bar will not fit right across the site. You can see it under the grey bar here: www.sugarnono.co.uk

The Css code I am using is:

.bluenav {
  background: #0082AB;
  background-position: center;
  margin: auto;
  width: 100%;
  height: 75px;
}

I appreciate any help. I am still new to css.

Pugazh
  • 9,453
  • 5
  • 33
  • 54
Steve Linden Wyatt
  • 1
  • 3
  • Is there a div surrounding it that is not allowing it to reach the edges of your page? 100% is relative to what is containing `bluenav`. So if `bluenav` is inside a 500px div, 100% will equal 500px. Also, you won't need `margin: auto;` if you're going for full width. – Tom Cash May 06 '16 at 09:52
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D May 06 '16 at 09:57
  • Use dev tools to explore the page. Heres a screenshot of your page and it gives an idea of the structures within it. You can see that the `div template box` is a certain width and your div is within that. http://postimg.org/image/c1cjsgz7l/full/ – Craicerjack May 06 '16 at 09:59
  • Related - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen – Paulie_D May 06 '16 at 09:59

1 Answers1

1

Your nav is in a container, therefore 100% is 100% of the container element, not 100% of the page.

Revised:

Based on the current theme - you could add this to your element (I would strongly recommend against this in all other situations)

.bluenav {
height:75px;
margin:0 -5000px 0 -5025px;
padding:0 5000px 0 5025px;
position:relative;
}
Gavin Thomas
  • 1,196
  • 6
  • 10
  • Thanks. How would I get around this? This is the header.php code: – Steve Linden Wyatt May 06 '16 at 11:48
  • Well, what your theme has done (which I would strongly recommend against, but you'd have to end up coding the entire header again) is add a huge margin and padding elements. See revised answer. – Gavin Thomas May 06 '16 at 12:22