Jump to content
OliverEggertsen

[solved] Full width header and top horizontal menu?

Recommended Posts

Hi.

 

I have tried searching for this issue for a while but some of the solutions just messed up on my site so i will try to provide a link to my site to see if i could get some help :-)

 

I already have the footer in full width but i would also like the header and top horizontal menu to be full width (while the cart, topmenu buttons, logo etc keep their position).

 

This is my site: Smykker og ure

I am using version 1.5.3.1

 

 

 

Hope you experts can help :-)

Thanks in advance

Share this post


Link to post
Share on other sites

Hi,

 

this is a bit more complicated than the footer, as making full width header influences the body of the page. From my experience, I solved this problem my closing the div tag of page sooner and then making new div containing all the columns + I had to write few CSS lines of code as well to position them properly.

Edited by PSfever.com (see edit history)

Share this post


Link to post
Share on other sites

in this case you have to edit the header.tpl file

 

remove the header <div> from the <div id="page">

 

pzu1Sgn.png

 

then remove grid_9 value

 

 

after that it will be neessary to change also width of the top horizontal menu (CSS styles) just change the width:980px; to width:100%;

  • Like 2

Share this post


Link to post
Share on other sites

you're welcome B)

 

thread marked as [solved]

 

regards

Share this post


Link to post
Share on other sites

you're welcome B)

 

thread marked as [solved]

 

regards

 

Now i am having trouble positioning the menu buttons more to the right so they fit the slider image below like before. how do i do this?

Edited by OliverEggertsen (see edit history)

Share this post


Link to post
Share on other sites

hmm what you mean by that: "more to the left" ? buttons are aligned to the left now:

RQJU6Hw.png

Share this post


Link to post
Share on other sites

hmm what you mean by that: "more to the left" ? buttons are aligned to the left now:

RQJU6Hw.png

 

Sorry, i meant to the right :-S

Share this post


Link to post
Share on other sites

in this case you have to edit top menu .tpl file

 

here is a code:

{if $MENU != ''}

<!-- Menu -->
<div class="sf-contener clearfix">
    <div style="background:#B7CEEC; display:block; width:100%">
	    <div style="width:980px; margin:auto;">
	  <ul class="sf-menu clearfix">
	   {$MENU}
	   {if $MENU_SEARCH}
	    <li class="sf-search noBack" style="float:right">
		 <form id="searchbox" action="{$link->getPageLink('search')}" method="get">
		  <p>
		   <input type="hidden" name="controller" value="search" />
		   <input type="hidden" value="position" name="orderby"/>
		   <input type="hidden" value="desc" name="orderway"/>
		   <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
		  </p>
		 </form>
	    </li>
	   {/if}
	  </ul>
	    </div>
    </div>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}

 

can you try with this one? hope it will work ;)

(remember about backup)

Share this post


Link to post
Share on other sites

ok, sorry

 

can you restore the original file?, i will try once again

Share this post


Link to post
Share on other sites

new code:

{if $MENU != ''}

<!-- Menu -->
<div class="sf-contener clearfix">
    <div style="display: block; width: 100%; background: #B7CEEC; clear: both; overflow: hidden; ">
	  <ul class="sf-menu clearfix">
	   {$MENU}
	   {if $MENU_SEARCH}
	    <li class="sf-search noBack" style="float:right">
		 <form id="searchbox" action="{$link->getPageLink('search')}" method="get">
		  <p>
		   <input type="hidden" name="controller" value="search" />
		   <input type="hidden" value="position" name="orderby"/>
		   <input type="hidden" value="desc" name="orderway"/>
		   <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
		  </p>
		 </form>
	    </li>
	   {/if}
	  </ul>
    </div>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}

 

 

then edit css styles:

 

/modules/blocktopmenu/css/superfish-modified.css

remove the: margin: 10px 0; from: and add margin:auto; change the width to 980px;

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

 

the same file (line ~70)

remove the float: left; and margin-bottom: 1em; from:

.sf-menu {
font-size: 12px;
}

 

effect:

9oEkxot.png

Share this post


Link to post
Share on other sites

maybe it's because that you've got different template file of the module, can you attach your original file?

then restore it once again (sorry to bother you)

Share this post


Link to post
Share on other sites

I appreciate your help a lot :-)

 

 

This is my .tpl file:

 

{if $MENU != ''}

</div>

 

<!-- Menu -->

<div class="sf-contener clearfix">

<ul class="sf-menu clearfix" style="width:100%;">

{$MENU}

{if $MENU_SEARCH}

<li class="sf-search noBack" style="float:right">

<form id="searchbox" action="{$link->getPageLink('search')}" method="get">

<p>

<input type="hidden" name="controller" value="search" />

<input type="hidden" value="position" name="orderby"/>

<input type="hidden" value="desc" name="orderway"/>

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />

</p>

</form>

</li>

{/if}

</ul>

<div class="sf-right"> </div>

 

<!--/ Menu -->

{/if}

Share this post


Link to post
Share on other sites

that's right

 

you've got additional: </div> right after the {if $MENU != ''}

can you try to add the same </div> to the code i suggested you before?

Share this post


Link to post
Share on other sites

Finally!

Im glad that it work as you expect now

Share this post


Link to post
Share on other sites

that's right

 

you've got additional: </div> right after the {if $MENU != ''}

can you try to add the same </div> to the code i suggested you before?

 

Oops, new problem :-S

Now the dropdowns in the menu don't work

 

Finally!

Im glad that it work as you expect now

 

Oops, new problem :-S

Now the dropdowns in the menu don't work

Share this post


Link to post
Share on other sites

oh my God, its my fault, remove the overflow: hidden;

from the code that i suggested to use:

<div style="display: block; width: 100%; background: #B7CEEC; clear: both; overflow: hidden; ">

(from tpl file)

  • Like 1

Share this post


Link to post
Share on other sites

Finally!

Im glad that it work as you expect now

 

 

When i try putting an item in the cart and then hover over the right corner cart block the dropdown is to the far right. How can i move to be just below the cart block? I tried changing giving the css position:relative; and right:140px; but it created some grey thing to the right of the dropdown like this:

 

Skaeligrmbillede2013-07-10kl001357_zpsd45ea685.png

 

 

 

 

What shall i do?

Share this post


Link to post
Share on other sites

go to the modules > positions

 

search for displayTop

 

move the block cart module right after the block user informatation

 

then edit the css file: /modules/blockcart/blockcart.css

 

#header #cart_block {
z-index: 10;
display: none;
position: absolute;
right: 0;
top: 48px;
height: auto;
width: 200px;
box-shadow: 0 1px 0 #C6C6C6;
background: #eee;
}

 

i changed the top: 65px to top: 48px;

Share this post


Link to post
Share on other sites

checked it and still there is blank space:

JHZ5m2f.png

 

it is related to the css styles, have you changed the top:65px value?

Share this post


Link to post
Share on other sites

maybe its because i use chrome / win OS

 

btw. i check it while a go:

 

cMfPJVN.png

 

now it looks well :)

Share this post


Link to post
Share on other sites

i was looking for the same effect in ps 1.5.4.1

 

i done all the changes show my you but fialed to get the effect plz help

 

kbi6.png

Share this post


Link to post
Share on other sites

sorry but it's hard to say what you have to change without an access to the store. it's a css / html thing and it is hard to debug it without access

Share this post


Link to post
Share on other sites

maybe you can share your IP ? then i will be able to check it (but in this case you can't be behind the NAT / firewall)

Share this post


Link to post
Share on other sites

actualy i dnt have a seprate ip thts the problem

 

my question is very simple i repeat it

i have ps 1.5.4.1 now i want a full strecth topmenu bar 100% is it possible

& i knw its possible but how im trying to figure it how lets see

 

plz reply if you can help

Edited by anilm661 (see edit history)

Share this post


Link to post
Share on other sites

so in this topic you've got solution, doesn't work, it mean that something is wrong in code.

i can't say more, because i can't test it.

Share this post


Link to post
Share on other sites

Hello everyone,

 

I've tried to follow the tutorial unsuccessfully.

 

The header I'm trying to make is as follows:

1. Header at 100% width.

2. Menu, logo and cart should be centered at 980px;

 

my site is at: bit.ly/133st5W

 

This is what I did following this tutorial

1. Removed the header <div> from the <div id="page">

2. Removed grid_9 from <div id="header" class="alpha omega"> & <div id="header_right" class="omega">

3. Tried setting width from 980px to 100% in .sf-menu but the menu was just as small as the three menu items width that it contains.

 

Appreciate your help on this issue.

Share this post


Link to post
Share on other sites

Hi Vekia,

I followed your tips and succeeded in having a full lenght header but to have a full lenght top menu I had to add "</div>" (as you suggested in this post) even if there wasn't any "</div>" in the original blocktopmenu.tpl file.

This gave me the wanted effect but with a problem: the background color of the top menu is different in the additional parts.

Moreover, I modified the height of the header in global.css in order to use the entire background image (I'd like to have a three bands design, something like this: http://www.apicolturalequerce.it/) but the menu stays in the center while I want it to stay at the bottom of the header. How can I fix it?

Here is my site so you can debug it: http://rodolforascioni.it/lome/index.php.

Other problems: 1) as you can see the "search" ("cerca" in italian) module overlay the cart module; 2) dropdowns (see "prodotti") go under the slideshow and become invisible.

Can you help me?

 

Thanks a lot,

 

Marco

Share this post


Link to post
Share on other sites

hello

 

the background color of the top menu is different in the additional parts.

it's because you used background color code from the example above. you need to use own color.

 

 

but the menu stays in the center while I want it to stay at the bottom of the header.

to the sf-contener add margin-top: 403px; style

Share this post


Link to post
Share on other sites

Hi dear vekia,

 

what you mean this

then remove grid_9 value

 

Because I have the same problem like OliverEggertsen and I cant to solve it by this way.

 

Thank you in advance.

Share this post


Link to post
Share on other sites

Hi dear vekia,

 

what you mean this

 

 

Because I have the same problem like OliverEggertsen and I cant to solve it by this way.

 

Thank you in advance.

 

as far as i remember, this solution works for OliverEggertsen. YOu have to change it in the header.tpl file located in your theme directory.

Share this post


Link to post
Share on other sites

Dear Vekia,

 

I found your explain at another topic and now my site look this way http://bit.ly/1ajnSFX

 

Please, find my faults and help to move logo and cart etc to the center.

 

Thank you in advance.

Share this post


Link to post
Share on other sites

so you don't want full width header? (im asking because you said "move logo and cart etc to the center")

Share this post


Link to post
Share on other sites

so it will be a bit more complicated in this case.

 

you will need to rebuild the template file, modules .tpl fles also.

 

you will have to create a separate div to the menu with width:100%

and other one div for modules attached to top section (without top menu) with width:980px; and margin:auto;

Share this post


Link to post
Share on other sites

After some change I got the same effect like Oliver in post #7 and I have the same problem - I need to move logo and menu button to the right and search, cart to the left. I made the change in the blocktopmenu.tpl file but I dont got effect like at Oliver site.

 

Could you offer to me another solution, please?

Share this post


Link to post
Share on other sites

Can anyone help me? I can't seem to get my header fixed and in the right place. When I've tried before it messed my whole site up. Using Prestashop 1.5.4.1 and Responsive theme. Thanks

Share this post


Link to post
Share on other sites

hello

 

so what you exactly want? fixed header? or full width header (like main case in this topic)

im asking because you posted several messages in other topics related to this and ... im getting confused a bit :P

Share this post


Link to post
Share on other sites

So how do you get this working in version 1.6?

there isnt any grid_9 to delete, and anyway I tried to place the code above id="page" but not without any result

please help me out with this.

Share this post


Link to post
Share on other sites

Hi Vekia, I`m using your modul blok html pro and would like to get full header responsive logo?

Any idea how?

 

Here is html code:

<img src="http://totallighting.sk/img/cms/banner/banner_new.png" class="img-responsive" alt="TOTAL LIGHTING - Svietidlá a Osvetlenie" width="1100" height="224" style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 5px; padding-top: 5px; border-top: 1px #cccccc solid; border-bottom: 1px #cccccc solid;" />

 

Header logo from module it`s not responsive...

Share this post


Link to post
Share on other sites

Hello,

 

WOuld you be able to tell me exactly how to do the same, but on 1.6.1.0?

 

Thanks!
 

Val

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More