Top horizontal menu width 100%

[DARKF3D3]

I'm wondering if it possible to have the top horizontal menu as wide as all the browser width.

Something like the footer, where the content is wide as the body width, but the background continue on all the page.

[vekia]

if you're on default theme use this:

 

to global.css append this code:
 

  #header .headerbg {
    background:url('http://i.imgur.com/98h2maZ.png') top repeat-x;
  }

then in header.tpl file search for code:
 

<header id="header">
					<div class="banner">
						<div class="container">
							<div class="row">
								{hook h="displayBanner"}
							</div>
						</div>
					</div>
					<div class="nav">
						<div class="container">
							<div class="row">
								<nav>{hook h="displayNav"}</nav>
							</div>
						</div>
					</div>
					<div>
						<div class="container">
							<div class="row">
								<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
							</div>
						</div>
					</div>
				</header>

and change it to:

<header id="header">
					<div class="banner">
						<div class="container">
							<div class="row">
								{hook h="displayBanner"}
							</div>
						</div>
					</div>
					<div class="nav">
						<div class="container">
							<div class="row">
								<nav>{hook h="displayNav"}</nav>
							</div>
						</div>
					</div>
					<div class="headerbg">
						<div class="container">
							<div class="row">
								<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
							</div>
						</div>
					</div>
				</header>

(i added class="headerbg" to last main <div> block)

 

 

effects:

[Malinovsky]

I made it exactly as you have done. I have noticed one mistake in google chrome. You have to add height manualy  

  #header .headerbg {
    background:url('http://i.imgur.com/98h2maZ.png') top repeat-x;
    height:198px;
  }

[vekia]

strange i checked it on chrome and worked well without height param :-)

[Malinovsky]

Could you look on my website ?  

 

Try to change the size of your browser then you should notice that everything is crashing. 

I'm not sure what to do with that. 

 

http://weeding-cars.pl/index.php
 

 

Ok , I know what is wrong. 

 

Menu bar is changing automatically after resizing the browser and that is why my background is crashing.
Is there any easy solution  ?   

 

Edited August 10, 2014 by Malinovsky (see edit history)

[julien325cab]

Bonjour,

N'y a t'il pas un moyen en modifiant simplement la largeur ou noms des div du header tpl(au lieu d'insérer une image)? cela permettrait d'être responsive.

 

Merci

Julien

 

Hi,

Is there no there not a way simply by changing the width or names of the header div dwt (instead of inserting an image)? this would be responsive.

 

thank you

Julien

[li.va.mold]

if you're on default theme use this:

 

to global.css append this code:

 

  #header .headerbg {
    background:url('http://i.imgur.com/98h2maZ.png') top repeat-x;
  }

then in header.tpl file search for code:

 

<header id="header">
					<div class="banner">
						<div class="container">
							<div class="row">
								{hook h="displayBanner"}
							</div>
						</div>
					</div>
					<div class="nav">
						<div class="container">
							<div class="row">
								<nav>{hook h="displayNav"}</nav>
							</div>
						</div>
					</div>
					<div>
						<div class="container">
							<div class="row">
								<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
							</div>
						</div>
					</div>
				</header>

and change it to:

<header id="header">
					<div class="banner">
						<div class="container">
							<div class="row">
								{hook h="displayBanner"}
							</div>
						</div>
					</div>
					<div class="nav">
						<div class="container">
							<div class="row">
								<nav>{hook h="displayNav"}</nav>
							</div>
						</div>
					</div>
					<div class="headerbg">
						<div class="container">
							<div class="row">
								<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>
								{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
							</div>
						</div>
					</div>
				</header>

(i added class="headerbg" to last main <div> block)

 

 

effects:

 

Hello all,

 

I want to change similarly Top horizontal menu width to 100% but after the changes described in the two documents (global.css and header.tpl) the result unfortunately is not similar to the picture presented. 

 

 I use PS 1.6.0.8 and the theme is bootstrap (and banner block is disable).

 

Attached find the store image resulting from the changes.

 

Thanks in advance for your help. 

 

Vali.