(Solved) Full width header without affecting the other parts of the page?

[JANDSCLOTHINGCO]

Trying to adjust JUST the header to full width and not sure I am doing it correctly. I have followed this thread http://www.prestasho...age__hl__header

 

However I do not know what they mean by remove grid_9. I also noticed once I do that it messes with the entire page (i.e. top horizontal menu and image slider home) How can I make the header full width YET leave the top menu and image slider centered?

Edited July 16, 2013 by JANDSCLOTHINGCO (see edit history)

[vekia]

hello, here I am, the author of know-how

it is possible to check your website? if so, please share the url.

[JANDSCLOTHINGCO]

Oh sorry. www.jandsclothingco.com using 1.5.4.1

Edited July 15, 2013 by JANDSCLOTHINGCO (see edit history)

[vekia]

thanks

 

i checked your website

 

you want to achieve something like:

 

 

am I right?

[JANDSCLOTHINGCO]

yes exactly like that

[vekia]

1. go to header.tpl file and change:

<div id="page" class="container_9 clearfix">

to:

<div id="page" class="container_9 clearfix" style="width:100%!important">

 

2. change the:

<div id="header" class="grid_9 alpha omega">

to:

<div id="header" class=" alpha omega">

 

3 change the:

<div id="header_right" class="grid_9 omega">

to:

<div id="header_right" class=" omega" style="width: 100%!important;">

 

4. open the superfish-modified.css: /modules/blocktopmenu/css/superfish-modified.css

and change the:

.sf-menu {
margin: 10px 0;
padding: 0;
width: 980px;
background: #000000;
}

to:

.sf-menu {
margin: 10px 0;
padding: 0;
width:100%;
background: #000000;
}

 

5. open the /modules/homeslider/bx_styles.css

 

change the:

.bx-wrapper {
margin-bottom: 20px;
height: 300px;
clear:both;
}

to:

.bx-wrapper {
margin-bottom: 20px;
height: 300px;
clear:both;
margin:auto;
}

[JANDSCLOTHINGCO]

Ok I did the header by itself and it is moving the image slider with it. Is this because the module is hooked into the displaytop position or do I need to modify something else?

[JANDSCLOTHINGCO]

I've noticed it is doing that with the products as well. This is the part I can't figure out. I want the pages (ie. products, specials, my account, etc) to STAY centered to the screen as they are by default at all times and ONLY the footer and header full width.

 

FINALLY! lol After messing around with the header.tpl file and searching some other header threads this one worked for 1.5.4.1

 

<div id="page" class="container_9 clearfix" style="width: 100%;">

 

<div id="header" class="grid_9 alpha omega" style="width: 100%; clear:both; display:block; overflow:hidden;">

 

and adding this line right AFTER the one above

<div style="width: 980px; display:block; margin:auto; clear:both;">

 

and adding this

<div style="width: 980px; display:block; margin:auto; clear:both;">

 

on the line BEFORE

 

<div id="columns" class="grid_9 alpha omega clearfix">

Edited July 16, 2013 by JANDSCLOTHINGCO (see edit history)

[vekia]

thanks for confirmation and additional solution

i've noticed that you modified a bit the menu and whole header - now looks awesome

good job!