Help with top menu background

HTML & CSS
1

Hi Everyone,
Not great with CSS and hoping someone can help.

I’m attempting to make the green bar in the top menu navigation be full width, but have the links still be inside of the container div.

Here is how it currently looks: http://www.greensurfshop.com

I would like to have the green bar extend the full width of the window. Any suggestions?

Thanks!

2

Hi Envirosurfer. Welcome to SitePoint. :slight_smile:

It’s not hard. What you will have to do, though, is remove the #TopMenu and #socialmedia divs from the #Container div and place them in a new div above it.

Let’s say call that new container div at the top .topwrap. So, move the green background to this div, which will stretch to 100%.

.topwrap {
  background-image: url("http://www.greensurfshop.com/product_images/header_images/Purses_headerImage.png");
}

But then you’ll have to wrap #TopMenu and #socialmedia in an inner div with:

.inner {
  margin: 0 auto;
  width: 958px; 
  overflow: hidden;
}
3