DARKF3D3 Posted August 8, 2014 Share Posted August 8, 2014 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. Link to comment Share on other sites More sharing options...
vekia Posted August 9, 2014 Share Posted August 9, 2014 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: Link to comment Share on other sites More sharing options...
Malinovsky Posted August 10, 2014 Share Posted August 10, 2014 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; } Link to comment Share on other sites More sharing options...
vekia Posted August 10, 2014 Share Posted August 10, 2014 strange i checked it on chrome and worked well without height param :-) Link to comment Share on other sites More sharing options...
Malinovsky Posted August 10, 2014 Share Posted August 10, 2014 (edited) 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) Link to comment Share on other sites More sharing options...
julien325cab Posted September 23, 2014 Share Posted September 23, 2014 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 Link to comment Share on other sites More sharing options...
li.va.mold Posted October 2, 2014 Share Posted October 2, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts