Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

making nav header background 100% screenwidth WordPress

  • SOLVED

Hi! How can I make the transparent navigation background100% screenwidth (fluid?

I want later to have an effect like here:

http://lifeingreenville.com/work/prosperous

but I need to make the navigation-wrapper 100%

here is my site: ht.klausdyba.com

2012-10-02 by klaus dyba

Answers (4)

2012-10-02

Arnav Joy answers:

go to line no. 24 here

http://ht.klausdyba.com/wp-content/themes/greenearth/stylesheet/skeleton-responsive.css

.container {
margin: 0 auto;
padding: 0;
position: relative;
width: 960px
}

and replace it with

.container {
margin: 0 auto;
padding: 0;
position: relative;

}

Arnav Joy comments:

then go to this
http://ht.klausdyba.com/wp-content/themes/greenearth/style.css line 399

div.content-wrapper {
position: relative;
}

and replace with

div.content-wrapper {
margin: 0 auto;
position: relative;
width: 960px;
}

klaus dyba comments:

This worked! But it seems that it only kicks in when the width is 961 and more. There are 2 or 3 more responsive widths (change width of screen). There it is like before. How can I make it for those as well?

Arnav Joy comments:

try replacing following

.container {
width: 420px;
}

with

.container {
width: 100%
}
at line 281 of
http://ht.klausdyba.com/wp-content/themes/greenearth/stylesheet/skeleton-responsive.css

klaus dyba comments:

Cool! I changed it for all media queries sizes. It works like i wanted!!

But one more thing: the .page-wrapper seems to stay 960 (or 100%). Especially if you look the site on a phone. You can scroll to the left... any ideas why? and the content seems not centered anymore...


Klaus

klaus dyba comments:

yeah it seems only 961 and up it is centered. all other sizes not... might stay at 960px?

2012-10-02

Michael Caputo answers:

add this to the bottom of your style.css CSS:

div.navigation-container{width:100%;}

2012-10-02

Marko Nikolic answers:

Do something like this:

div.navigation-container {
width: 100%;
}

And then add new div within .header-wrapper div, put some width and margin: 0 auto; - that will make it be centered on the page.

If you need more details about that which files you should edit, let me know.

Cheers

2012-10-02

Manoj Raj answers:

Add the following style

div.navigation-container { width: 100%; }
div.header-wrapper { width: 960px; margin: 0 auto; }