[SOLVED] how to display fixed horizontal top menu ?

[Safwen]

Hi guys,

 

the problem i have that i would like to put the horizontal top menu on the whole page's width to obtain something like that http://outgrow.me/

 

i can manage smarty html and css

 

can anyone help me please ?

[sooroos]

what you see there is full width header i think, here is an usefull link, thx to vekia:

 

http://www.prestasho...age__hl__header

Edited August 20, 2013 by sooroos (see edit history)

[vekia]

everything depends on theme that you use

if you want to modify default theme - it's necessary to change almost everything in the top part of the template.

[Safwen]

everything depends on theme that you use

if you want to modify default theme - it's necessary to change almost everything in the top part of the template.

 

Yes Vekia it's the default theme on PS 1.5.4.1 . Please can you show me how to do it ?

[Jiten rash (away)]

http://outgrow.me/ is this ur site or u want something like that its called fixed navigation

[vekia]

you can do it in many ways, one of them you can find above, posted by sooroos.

but of course you will have to customize it.

 

you can also check this one: fixed header in prestashop

this is the pattern, you can use it and customize appearance of the top section, you will get the same effect.

 

by appearance i mean css modification and remove all unnecessary modules

[Safwen]

Vekia please in the this post here can you explain to me which grid 9 value should i remove ?

[Jiten rash (away)]

no vekia he is only taking about top menu menu may be like floating navigation

ex:http://www.addyosmani.com/resources/rocketbar/version2/

[vekia]

i said that he can do it in many ways and this is as example of the modification to achieve it

[sooroos]

Off topic: vekia, can you please reply to my pm?

On topic: if you need only the top menu (not the whole header) to be sticky read here post #10:

http://www.prestashop.com/forums/topic/259734-solved-does-any1-know-how-to-make-the-top-horizontal-menu-floating/

[Jiten rash (away)]

is it some like this u expect ?

http://www.addyosmani.com/resources/rocketbar/version2/

[vekia]

i have about 500 unread messages, im totally lost in it

[Safwen]

no i just would like the top menu to take the width of the whole page

[vekia]

okay,

 

so what you've got now?

is there any chance to check your website? if so - please share the url.

it's hard to help without an access to the website

[Safwen]

is it some like this u expect ?

http://www.addyosman...etbar/version2/

Jiten rash no just a simple menu but taking the page's whole width

[Jiten rash (away)]

is saroos , safwen same person?..so u mean top menu in full page 1200px to 1000px???

[Safwen]

okay,

 

so what you've got now?

is there any chance to check your website? if so - please share the url.

it's hard to help without an access to the website

 

i feel i'm so close look what i get vekia just miss a litlle bit at the right of the page to get my menu take the whole width

 

look here

Edited August 20, 2013 by Safwen (see edit history)

[sooroos]

is saroos , safwen same person?..so u mean top menu in full page 1200px to 1000px???

no, lol

[vekia]

but i don't know how the code looks like, is hard to say what's going on there without an access to the code.

 

try to add width param and margin:auto;

[Safwen]

no, lol

 

sorry sooroos but i don't need a floating menu

[Safwen]

vekia i'am in the localhost that's why i can't post a link here

in my header.tpl i have the following code

<!-- Header -->
  <div id="header" class="grid_9 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_9 omega">
 {$HOOK_TOP}
   </div>
  </div>
 <div id="page" class="container_9 clearfix">

 

and in my css i have that

.sf-contener {
clear: both;
}
.sf-right {
 margin-right: 14px;
 float: right;
 width: 7px;
}
.sf-menu, .sf-menu * {
margin:   0;
padding:  0;
list-style:  none;
}
.sf-menu {
margin: 0px 0;
padding:12px;
width:100%;/* 980 */
background: #000000;
}
.sf-menu ul {
position:  absolute;
top:   -999em;
width:   10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:   100%;
}

[vekia]

and module .tpl file ? can you paste contents of it?

[Safwen]

and module .tpl file ? can you paste contents of it?

 

topmenu.tpl

 

{if $MENU != ''}
<!-- Menu -->
<div class="sf-contener clearfix">
 <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" placeholder="Rechercher..." value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />  
  </p>
 </form>
   </li>
  {/if}
 </ul>
</div>
<div class="sf-right"> </div>
<!--/ Menu -->
{/if}

[vekia]

add these styles for the .sf-contener:

width:100%;/* 980 */
background: #000000;

 

im not sure at all if this will work, it's hard to say without any possibility to test the code.

[Safwen]

add these styles for the .sf-contener:

width:100%;/* 980 */
background: #000000;

 

im not sure at all if this will work, it's hard to say without any possibility to test the code.

 

Thank You Vekia i resolved the problem

[vekia]

im so happy, glad to hear that it works

im going to mark this topic as [sOLVED]

 

best regards

[prestaslo]

Thank You Vekia i resolved the problem

 

So, what is solution now? 

 

You use default theme? 

[skydrakex]

Hi guys, I'm using default-bootstrap on 1.6.1. Which is the right tutorial for making like what TS wants as like this website here > http://outgrow.me/

thx