New way to make a 100% full width header and menu

PrestaShark · October 11, 2013

Hi guys,

I was searching for a while for a good explained solution how to make a 100% full width header with menu.

But none of them make this in way i need in default prestashop 1.5.6 theme.

So this is mine soluton.

We need theese files : global.css, grid_prestashop.css, superfish-modified.css (in /modules/blocktopmenu/css ), header.tpl file:

In global css:

/* ************************************************************************************************
		HEADER
************************************************************************************************ */
#header {background:#f9f9f9;}
#header_logo {
position:relative;
	top: 30px;
	z-index: 1;
}

#header_right {
	position:relative;
	width:1050px;margin:0 auto;
}

In grid_prestashop.css

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}
.container_9 .grid_10 {width:100%;}

In header.tpl

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		
		<!-- Header -->
			<div id="header" class="grid_10 clearfix">
				
				<div id="header_right" class="grid_10 clearfix">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				
					{$HOOK_TOP}
				</div>
			</div>

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

			
			<div id="columns" class="grid_9 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class="grid_7 omega">
	{/if}

In superfish-modified.css:

.sf-menu {
	margin: 10px 0;
	padding:0;
	width:1050px;/* 980 */
	background: #383838;
}

The result

Now if You want to make 100% header with menu just need this one modification:

In global css:

#header_right {
	position:relative;
	width:100%;margin:0 auto;
}

In superfish-modified.css:

.sf-menu {
	margin: 10px 0;
	padding:0;
	width:100%;/* 980 */
	background: #383838;
}

The result

Enjoy!

Edited February 24, 2014 by kisweb (see edit history)

vekia · October 11, 2013

nice one thank you for sharing your solution i will paste url to this thread for everyone with question related to full with header and menu

PrestaShark · October 11, 2013

I'm glad
Thank You Vekia!

flipe · October 25, 2013

I tried to do it in a 1.5.3.1 Prestashop, and after all changes I got that error on the header, that tip works just to 1.5.6?

P.S.: Thanks for this tip, is amazing!

PrestaShark · October 25, 2013

I tried to do it in a 1.5.3.1 Prestashop, and after all changes I got that error on the header, that tip works just to 1.5.6?

P.S.: Thanks for this tip, is amazing!

Hi flipe,

Your error was solved?

If yes we can say that this solution is now suitable for Prestashop 1.5.3.1+ default theme

vekia · October 25, 2013

as far as i remember ps 1.5.3.x + 1.5.4.x has got a bit different construction of header, unfortunately, there was several changes described here (http://www.prestashop.com/forums/topic/242732-1541-default-theme-menu-moved-to-right-how-to-fix/)

flipe · October 25, 2013

Hi flipe,

Your error was solved?

If yes we can say that this solution is now suitable for Prestashop 1.5.3.1+ default theme

Is not solved, I have the problem that you can see in the attached image.

PrestaShark · October 25, 2013

Can You provide url for Your site. PM or here?

flipe · October 25, 2013

www.isendero.com/testado

Edited October 25, 2013 by flipe (see edit history)

PrestaShark · October 26, 2013

Flipe problem was solved easy. Just not all above css codes was apply properly.

So this header and menu solution is suitable for default Prestashop 1.5.3.1 and above

vekia · October 26, 2013

PrestaShark · October 26, 2013

This shop have geolocalization restriction only for customers from Brazil.

flipe · October 26, 2013

I got it Kisweb, if you want, you can put here the code modifications for users of 1.5.3.1!

Really thank you for your time helping me!

Suyog · October 28, 2013

Hello,

I have followed this thread to make my site's header and menubar full, but the menubar is getting too much down ,and others items like search bar, cart, are also not getting aligned properly,

my prestashop version is 1.5.6 stable version,

Can you please tell me how to make header and menubar full for 1.5.6 version.

Thanks in advance.

Edited October 28, 2013 by Suyog (see edit history)

PrestaShark · October 28, 2013

Hi Suyog,

Please provide url here or via PM. I will try to help You with

Suyog · October 28, 2013

hi kisweb,

url is www.mintkart.com

Suyog · October 28, 2013

i have done all the changes according to your solution, please check.

flipe · October 28, 2013

I have some problems, maybe you can take a look and help me:

- If I let the configuration in 1050px, search bar stay wrong

- The "new" stamp stay wrong

- How to make products list stay well-arranged in homepage like in the category page? 4 products per columns and with the same margins.

Thank you!

PrestaShark · October 28, 2013

I have some problems, maybe you can take a look and help me:

- If I let the configuration in 1050px, search bar stay wrong

- The "new" stamp stay wrong

- How to make products list stay well-arranged in homepage like in the category page? 4 products per columns and with the same margins.

Thank you!

Hi, flipe

We will work with Your site at PM

Solution for the second and third issue (both are related):

1) At: modules/homefeatured/homefeatured.css

#featured-products_block_center li {
    margin-right:10px;
    padding:10px 0;
    width:180px;
    height:300px;
}

2) At Preferences > Images set 178x178px for "home_default" images, and regenerate it.

3) At themes/default/modules/homefeatured/homefeatured.tpl set

{assign var='nbItemsPerLine' value=4}

The New Badge and the product align at the HomeFeatured module will be perfect fit with Your modified default two column theme.

Edited October 28, 2013 by kisweb (see edit history)

flipe · October 30, 2013

I have two little problems to solve, I think be "little"!

One is the horizontal header bar, doesn't matter if I put 1050px or 100%, it stay like in the pic.

Another is where to set the height to product buy button doesn't looks like a stairs!

Edited October 30, 2013 by flipe (see edit history)

Suyog · October 31, 2013

Hi flipe,

themes/_YOUR_THEME_/product.tpl

go to line number 440,

and put (style="height:40px; font-size: 26px;") as below

Suyog · October 31, 2013

Hi @flipe,

Set height to product buy button,

got to,

themes/_YOUR_THEME_/product.tpl

scroll window to 440 line,

u will see the following code,

replace it with

i just added this style="height:40px; font-size: 26px;

flipe · October 31, 2013

i just added this style="height:40px; font-size: 26px;

That don't worked for me.

kakalxlax · November 5, 2013

thanks for the helpful post

but when i zoom out, evrything adjusts to the new zoom except the left, center and right column that remain in the center of the site

using default theme 1.5.4

Edited November 5, 2013 by kakalxlax (see edit history)

vekia · November 5, 2013

kakalxax can you share url to your website? it will be much easier to say what's going on there

kakalxlax · November 5, 2013

thanks for the response vekia, my site is already open to the public so im currently using a localhost to test the changes

my theme is not much more than the default one with an horizontal menu

Edited November 5, 2013 by kakalxlax (see edit history)

PrestaShark · November 5, 2013

Hi, kakalxlax

Please provide then some screenshots. This is weird with all problems in this thread. I make it work on default theme and i can make it again and again.

I try to help. But all of readers must to know that this solution is only about 100% width header/menu. Other "issues" with search/logo/cart position is not related with subject of this thread

Edited November 11, 2013 by kisweb (see edit history)

MerseyRay · November 11, 2013

Just done this on our site.

A few additions to the logo, menu etc.. .but looks good.

thanks

http://www.no-match.co.uk/

PrestaShark · November 11, 2013

Just done this on our site.

A few additions to the logo, menu etc.. .but looks good.

thanks

http://www.no-match.co.uk/

Im glad to hear Thank You for feedback!

nemedities · November 14, 2013

This is what I was looking for, big thanks! But I want to keep my 3 columns instead of 2 under the menu. How do I change that?

PrestaShark · November 14, 2013

This is what I was looking for, big thanks! But I want to keep my 3 columns instead of 2 under the menu. How do I change that?

Hi nemedities!

I will check this and give solution!

Solution to keep 3 columns instead of 2

header.tpl must look like here: (result http://bit.ly/1hHJb8d)

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		
		<!-- Header -->
			<div id="header" class="grid_10 clearfix">
				
				<div id="header_right" class="grid_10 clearfix">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				
					{$HOOK_TOP}
				</div>
			</div>

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

			
			<div id="columns" class="grid_9 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class="grid_5">
	{/if}

The change is here:

<!-- Center -->
				<div id="center_column" class="grid_5">

instead of

<!-- Center -->
				<div id="center_column" class="grid_7 omega">

Edited November 14, 2013 by kisweb (see edit history)

nemedities · November 15, 2013

Hi nemedities!

I will check this and give solution!

Solution to keep 3 columns instead of 2

header.tpl must look like here: (result http://bit.ly/1hHJb8d)

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		
		<!-- Header -->
			<div id="header" class="grid_10 clearfix">
				
				<div id="header_right" class="grid_10 clearfix">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				
					{$HOOK_TOP}
				</div>
			</div>

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

			
			<div id="columns" class="grid_9 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class="grid_5">
	{/if}

The change is here:

<!-- Center -->
				<div id="center_column" class="grid_5">

instead of

<!-- Center -->
				<div id="center_column" class="grid_7 omega">

Thanks Worked like a charm!

wilson113311 · November 23, 2013

Hi I have followed this down to the T and I just can not get something to work I am looking to have my logo/welcome/login etc fixed to 980 px in the centre, so it matches where the centre of my site is located but keep the 100% topmenu but also have the home/ipods/accessories in the 980px also is this possible please help?

PrestaShark · November 25, 2013

Hi wilson113311!

Ok. Let me understand. You want to archeive:

1) Header (logo, cart, search) keep at the center with 980px width,

2) Menu at 100% width,

3) Shop columnns at 980px

Correct? Send me Your shop url at PM. I try to help!

khaledsaied · December 10, 2013

Hi kisweb. Great code, thanks for sharing

Though I have some issues. I went through all your guide and did the exact same as you, the only difference is that I am running Prestashop 1.5.6.1 and therefor my header looks a little different from yours. so my header.tpl looks like this after the changes:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		<div id="page" class="container_10 clearfix">

			<!-- Header -->
			<div id="header" class="grid_10 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_10 omega">
					{$HOOK_TOP}
				</div>
			</div>
<div id="center_column" >
			<div id="columns" class="grid_10 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">
	{/if}

That results in a good full width header, but I also need to center the content of the site as in the attached image how can I achieve that? Any help would be appreciated.

vekia · December 10, 2013

grid_prestashop.css

instead of width in pixels for grid values, use percentages

khaledsaied · December 10, 2013

grid_prestashop.css

instead of width in pixels for grid values, use percentages

You mean in these grids:

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}
.container_9 .grid_10 {width:100%;}

In that case what should they be in percentage?

vekia · December 10, 2013

yes, i mean these grid values.

grid_9=100%

khaledsaied · December 10, 2013

yes, i mean these grid values.

grid_9=100%

Thanks for the proposal vekia, I tried that but sorry to say it did not solve my issue. The main content is still aligned to the left of the page.

Is there anything else in my header.tpl or other places in the code that could cause this problem?

vekia · December 10, 2013

yes because there is also orher grid values, you have to modify them also.

to be sure:

you want to define 100% width also to the contents? or just want to center it?

khaledsaied · December 10, 2013

yes because there is also orher grid values, you have to modify them also.

to be sure:

you want to define 100% width also to the contents? or just want to center it?

Hi again vekia, thanks for taking time to answer me.

I just want to center all of my content, so the only two things that are 100% width is my header(top) and the footer.

On the attached image you can see that all of the content is aligned to the left. The highlighted column is the center column and the two other columns are the left and right columns.

So what I want is to move all three of these columns to the center of the page.

I tried to add a div around these columns in the header.tpl and footer.tpl, but nothing worked maybe I did it wrong.

Any ideas?

Edited December 10, 2013 by khaledsaied (see edit history)

khaledsaied · December 10, 2013

Here is some of the code that I am confused by.

This is the last part of the header.tpl

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

			<!-- Header -->
			<div id="header" class="grid_10 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_10 omega">
					{$HOOK_TOP}
				</div>
			</div>
<!--<div id="center_column" >-->
			<div id="columns" class="grid_10 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">
	{/if}

And this is the footer.tpl

		{if !$content_only}
				</div>

<!-- Right -->
				<div id="right_column" class="column grid_2 omega">
					{$HOOK_RIGHT_COLUMN}
				</div>
			</div>

<!-- Footer -->
			<div id="footer" class="grid_10 alpha omega clearfix">
				{$HOOK_FOOTER}
				{if $PS_ALLOW_MOBILE_DEVICE}
					<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
				{/if}
			</div>
		</div>
	{/if}
	</body>
</html>

khaledsaied · December 11, 2013

Hi kisweb. Great code, thanks for sharing

Though I have some issues. I went through all your guide and did the exact same as you, the only difference is that I am running Prestashop 1.5.6.1 and therefor my header looks a little different from yours. so my header.tpl looks like this after the changes:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		<div id="page" class="container_10 clearfix">

			<!-- Header -->
			<div id="header" class="grid_10 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_10 omega">
					{$HOOK_TOP}
				</div>
			</div>
<div id="center_column" >
			<div id="columns" class="grid_10 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">
	{/if}

That results in a good full width header, but I also need to center the content of the site as in the attached image how can I achieve that? Any help would be appreciated.

Can anyone help with this? The content of my page is all aligned to the left instead of in the center of the page. Please help.

Edited December 11, 2013 by khaledsaied (see edit history)

MerseyRay · December 11, 2013

Can we not see your site ?

It would help us to help you

I think you mean you want it similar to my site www.no-match.co.uk

khaledsaied · December 12, 2013

Can we not see your site ?

It would help us to help you

I think you mean you want it similar to my site www.no-match.co.uk

Yes it is similar to that

Actually I decided to change the template as I could not solve the problem. But I have an image in one of my earlier posts which shows how the content is aligned to the left.. Don't know if that helps.

But the new template has the setup that I wan't

E2P Digital · December 20, 2013

Hi wilson113311!

Ok. Let me understand. You want to archeive:

1) Header (logo, cart, search) keep at the center with 980px width,

2) Menu at 100% width,

3) Shop columnns at 980px

Correct? Send me Your shop url at PM. I try to help!

Perhaps you could post the solution for all to see? You gave a partial solution. See if the 100% layout isn't explained fully then you haven't really addressed the issue. I appreciate your time but I think most of us who are looking for this solution have the same end results as wilson113311 in mind, so if there is a REAL solution to this, hopefully it is something all of us can see?

Thank you!

jonas87 · December 24, 2013

Perhaps you could post the solution for all to see? You gave a partial solution. See if the 100% layout isn't explained fully then you haven't really addressed the issue. I appreciate your time but I think most of us who are looking for this solution have the same end results as wilson113311 in mind, so if there is a REAL solution to this, hopefully it is something all of us can see?

Thank you!

second this

Sebastian.S · January 18, 2014

hi MerseyRay,

i would like to use this same Layout as you did on your Page.

could you post some instructions?

greetings

Oliver

Edited January 18, 2014 by Sebastian.S (see edit history)

MerseyRay · January 21, 2014

HI Sebastian,

The main alteration is in the header.tpl

Here is mine after the closing of the body tag

{if !$content_only} 
		{if isset($restricted_country_mode) && $restricted_country_mode}
        <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div>
{/if}
<!-- bof Header -->
<div id="header" class="grid_10 clearfix">
    <div id="header_right" class="grid_10 clearfix">
        <div id="header_logo">
  <a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" width="460" height="90" /> </a></div>
  {$HOOK_TOP}
        </div>
    </div>
<!-- eof Header -->
<div id="page" class="container_9 clearfix">
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Center -->
<div id="center_column" class="{if $page_name == 'index'}grid_9{else}grid_7 omega{/if}">
{/if}

in grid_prestashop.css I have these

.container_9 .grid_10 {width:100%;}

and in my global.css in my theme folder I have

#header_right {
        position:relative;
	width:1000px;
	height:93px;
	margin:0 auto;
}

Of course the width/height may be different on yours.

without a link to the site we cannot see what we are working with

E2P Digital · January 21, 2014

Perhaps you could post the solution for all to see? You gave a partial solution. See if the 100% layout isn't explained fully then you haven't really addressed the issue. I appreciate your time but I think most of us who are looking for this solution have the same end results as wilson113311 in mind, so if there is a REAL solution to this, hopefully it is something all of us can see?

Thank you!

Here are my results with adding an image to acheive the 100% layout for the menu

http://radiantbarrierkits.com

Pandi · January 27, 2014

Here are my results with adding an image to acheive the 100% layout for the menu

http://radiantbarrierkits.com

Hi E2P Digital, could you please post, how you have set it up? (what exactly did you put into the header.tpl file and what other changes you had to make to make it work?)

I have tried solution of MerseyRay but it did not work for me - I am working with a default theme of Prestashop 1.5.6.0 and the results look like as if the changes has influenced both position of columns under the header - and size and position of whole header (logo and shopping cart).

What I am hoping to achieve is exactly the same as what Wilson has mentioned:

"

1) Header (logo, cart, search) keep at the center with 980px width,

2) Menu at 100% width,

3) Shop columnns at 980px"

I would be very thankful for any advice!

MerseyRay · January 28, 2014

Pandi, what didnt work when you tried my solution ?

I did also move some of the closing div's out of the header.tpl (just after the {header} hook)

I moved them into the blocktopmenu.tpl, at the top of the file (before the {if.....})

So my blocktopmenu.tpl starts like this

</div></div> <!-- These are from header.tpl -->
{if $MENU != ''}
	
	<!-- Menu -->
	<div class="sf-contener clearfix">
		<ul class="sf-menu clearfix">

And my header.tpl like this

</a>{$HOOK_TOP}

				<!-- </div></div> Moved these 2 divs to topmenu.tpl -->
               
			</div>
		<div id="page" class="container_9 clearfix">

Try these alterations and post the results.

( A link to the site would be more helpful, for us to help you )

*********************
The reason I moved the 2 </div>'s is so that the blocktopmenu is outside of the div with the id="header_right" class="grid_9 omega"

Oh, and you have to make sure the blocktopmenu is the last item in the hooks position, otherwise anything after it will be outside the header_right div

This way you can have the header_right set to your preferred width (980px for example) and the blocktopmenu is still inside the full width header, but before the header closes.

I hope this makes sense.

An easier way of doing this would probably to have a hook called topmenuhook which is the last thing before the header div closes.. .but im not sure how to make that hook.

I have done these alterations to a fresh install of 1.5.6.2

Here are the results

http://no-match.co.uk/ps1562/index.php?

Edited January 28, 2014 by MerseyRay (see edit history)

Pandi · February 4, 2014

Thank you very much, MerseyRay, for your very helpful instructions! I cannot believe how nice everyone here is with help and advice.

Over the weekend I ended up with testing solution for full width menu from here (it was a bit easier for me to understand the principle): http://www.prestashop.com/forums/topic/290961-solved-how-to-create-full-width-top-menu/?do=findComment&comment=1469313 and it worked.

But I would really like to understand, how does your solution works, if you are willing to explain some points:

When you use "grid_10 clearfix" - what function does the "clearfix" have? Could you please explain?

In the beginning I thought, that "header_right" stands for the position of the blocktopmenu, but it does not seem right anymore - could you please explain what exactly the function of it is?

Lan Nguyen · February 5, 2016

Hi, I'm using a responsive theme, it looks awesome on desktop and smart phones, but the page-width does not fill the screen on tablets (i used boxed-mode page), there're always a blank space to the right of the page. I tried to change the max-width value base on the media queries, nothing changed. Its really weird!

Another question is that how to maintain the same layout of the theme between portrait and landscape orientation, just scale the whole site smaller-bigger when users switch viewports on tablets? My site looks good on landscape view, but like a mess on portrait view.

Please help me!

Lan

Newspower.ir · February 19, 2018

hi friends. plz help me. this my site : newspower.ir

my header is now wide to 100% per. but my cart block is in left. plz help me to shift it a bit to the right. thank u so much

Newspower.ir · February 19, 2018

hii plz help me. i want to shift cart and search bar next to each other upper than top menu (under header) at center.

plz help me.

my site is : newspower.ir

New way to make a 100% full width header and menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment