Jump to content

[solved] Full width header and top horizontal menu?

OliverEggertsen
 Share

Recommended Posts

OliverEggertsen Newbie

OliverEggertsen

Posted
Posted

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

Link to comment
Share on other sites
PSfever.com Newbie

PSfever.com

Posted
Posted (edited)

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)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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)

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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

Link to comment
Share on other sites
OliverEggertsen Newbie

OliverEggertsen

Posted
  • Author
Posted

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}

Link to comment
Share on other sites
OliverEggertsen Newbie

OliverEggertsen

Posted
  • Author
Posted

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

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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
Link to comment
Share on other sites
OliverEggertsen Newbie

OliverEggertsen

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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;

Link to comment
Share on other sites
jcar98 Newbie

jcar98

Posted
Posted

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.

Link to comment
Share on other sites
  • 4 weeks later...
F10X Newbie

F10X

Posted
Posted

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

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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;

Link to comment
Share on other sites
kochanie Newbie

kochanie

Posted
Posted

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?

Link to comment
Share on other sites
  • 2 months later...
  • 2 months later...
  • 6 months later...
  • 8 months later...
totallighting.sk Newbie

totallighting.sk

Posted
Posted

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...

Link to comment
Share on other sites
  • 2 months later...
  • 1 year later...
  • 1 year later...
 Share
Go to topic listing
×
×
  • Create New...