[SOLVED] does any1 know how to make the "top horizontal menu" floating?

sooroos · July 7, 2013

hello everyone,

i have a question regarding top horizontal menu module

i would like for my shop to have something like this:

http://addons.presta...emo/FO5145.html

in other words a top menu bar which stays on top of pages even if u are scrolling them down.

is this hard to achieve? i have searched the forum but didnt find anything. Any useful information would be appreciated.

thank you

Edited July 10, 2013 by sooroos (see edit history)

amr.rs · July 7, 2013

not hard. you mean like this http://www.mytechskool.com ?

sooroos · July 7, 2013

yes, something like that.

but how?

amr.rs · July 7, 2013

This should help you.

http://css-tricks.com/persistent-headers/

or this is simpler i guess

http://www.onlywebpro.com/2013/04/03/make-a-jquery-sticky-header-in-5-minutes/

Edited July 7, 2013 by amr.rs (see edit history)

sooroos · July 7, 2013

ok, i am a noob.

do i have to change the tpl and css files or i need just to create the javascript and bind it somehow ?

Paulito · July 7, 2013

Good morning

Just seen your post, this may help

I am sure you found answer but if not use the link below

http://mypresta.eu/en/art/tag/header/

Paul

Edited July 7, 2013 by perfumeskunk (see edit history)

sooroos · July 7, 2013

Good morning

Just seen your post, this may help

I am sure you found answer but if not use the link below

http://mypresta.eu/en/art/tag/header/

Paul

thx, but i dont want the whole header, just top horizontal menu

vekia · July 7, 2013

so, where you want to display other stuff from header? (like cart, languages select etc.)

sooroos · July 7, 2013

the other stuff can't remain normal?

in my first post here there is an example of what i would like to have

Edited July 7, 2013 by sooroos (see edit history)

sooroos · July 7, 2013

in the end i figured it alone, but thx to all the links above from u guys

here is what i did, and in my case it works, if u guys can test it and find bugs or so just write here.

in superfish-modified.js just add this:

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px'});

} else {

$('.sf-menu').css({position: 'static', top: '0px'});

}

});

Edited July 7, 2013 by sooroos (see edit history)

silentRun · July 8, 2013

The easiest way is to do it with just CSS.

The clue is using the CSS attribute position:fixed. More info here:

Scroll / follow sidebar

You may will need to change the .tpl of the desired menu, to wrap it inside an additional div.

Look to the result here:

http://css-tricks.com/examples/ScrollingSidebar/css.php

(choose CSS(fixed))

Good luck !

sooroos · May 8, 2014

now i want to fix the left and the right column on window scroll.

the code should be the same except for class/id name, but where should i place it?

rumit · July 21, 2014

in the end i figured it alone, but thx to all the links above from u guys

here is what i did, and in my case it works, if u guys can test it and find bugs or so just write here.

in superfish-modified.js just add this:

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px'});

} else {

$('.sf-menu').css({position: 'static', top: '0px'});

}

});

Thanks sooroos for the code! It works, but in PS 1.6 it should be added to hoverIntent.js

thelaptopdude · December 2, 2014

in the end i figured it alone, but thx to all the links above from u guys

here is what i did, and in my case it works, if u guys can test it and find bugs or so just write here.

in superfish-modified.js just add this:

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px'});

} else {

$('.sf-menu').css({position: 'static', top: '0px'});

}

});

I added that code but it didn't work

apatan · June 27, 2015

Hi,

I tried doing what has been mentioned in this post but am unable to get the sticky horizontal menu at the top of the website.

I am using version 1.5.6. and I need something like www.urbanladder.com.

Need help

apositivo · August 12, 2015

hi !

i add this code in : (prestashop1.6.1.0)

and this work !

file themes/default-bootstrap/header.tpl

{literal}
       <script type="text/javascript"> 
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px'});
} else {
$('.sf-menu').css({position: 'static', top: '0px'});
}
});
</script>
    {/literal}

Edited August 13, 2015 by apositivo (see edit history)

rololo88 · September 5, 2015

hi !

i add this code in : (prestashop1.6.1.0)

and this work !

file themes/default-bootstrap/header.tpl

{literal}
       <script type="text/javascript"> 
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px'});
} else {
$('.sf-menu').css({position: 'static', top: '0px'});
}
});
</script>
    {/literal}

Hi Apositivo, I also use PS 1.6.1.0 and i add your code in header.tpl of default-bootstrap folder but nothing works even after clearing cache of the shop and in my differents browser

Did you change any other file? I post my header.tpl in case of. Thanks.

----------------------------------------------------

{*

* 2007-2015 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]>

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE HTML>

<html{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}>

<head>

<title>{$meta_title|escape:'html':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

{/if}

{if isset($meta_keywords) AND $meta_keywords}

{/if}

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

{/foreach}

{/if}

{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}

{$js_def}

{foreach from=$js_files item=js_uri}

{/foreach}

{/if}

{$HOOK_HEADER}

<!--[if IE 8]>

<![endif]-->

</head>

<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

{if !isset($content_only) || !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<p>{l s='You cannot place a new order from your country.'}{if isset($geolocation_country) && $geolocation_country} <span class="bold">{$geolocation_country|escape:'html':'UTF-8'}</span>{/if}</p>

</div>

{literal}

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px'});

} else {

$('.sf-menu').css({position: 'static', top: '0px'});

}

});

</script>

{/literal}

{/if}

{hook h="displayBanner"}

</div>

<nav>{hook h="displayNav"}</nav>

</div>

<div>

</a>

</div>

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

</div>

</header>

</div>

{if $page_name !='index' && $page_name !='pagenotfound'}

{include file="$tpl_dir./breadcrumb.tpl"}

{/if}

<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>

</div>

{if isset($left_column_size) && !empty($left_column_size)}

<div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>

{/if}

{if isset($left_column_size) && isset($right_column_size)}{assign var='cols' value=(12 - $left_column_size - $right_column_size)}{else}{assign var='cols' value=12}{/if}

{/if}

Edited September 5, 2015 by rololo88 (see edit history)

razvy · October 25, 2015

Try to add it to the end of the header.tpl.

And also check if the class of your menu is indeed '.sf-menu', otherwise change '.sf-menu' to whatever your class name is.

lynx413 · March 16, 2016

hi !

i add this code in : (prestashop1.6.1.0)

and this work !

file themes/default-bootstrap/header.tpl

{literal}
       <script type="text/javascript"> 
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px'});
} else {
$('.sf-menu').css({position: 'static', top: '0px'});
}
});
</script>
    {/literal}

Hi i added this code and it works, but the menu moves a bit to the right when scrolled down. I've attached before and after pics so you can se what I mean. As you can see I have two rows of categories and when scrolling down the "TAPES" category on the bottow row gets pushed up and the whole menu moves to the right.

Does anyone know how this can be fixed?

Thanks in advance,

Olof

TOP MENU:

https://www.dropbox.com/s/n5slfgik5fvbto6/TopMenu.png?dl=0

TOP MENU WHEN SCROLLED DOWN:

https://www.dropbox.com/s/qpgmajon605ezn0/Topmenuscrolleddown.png?dl=0

Edited March 16, 2016 by lynx413 (see edit history)

apositivo · March 16, 2016

Hi i added this code and it works, but the menu moves a bit to the right when scrolled down. I've attached before and after pics so you can se what I mean. As you can see I have two rows of categories and when scrolling down the "TAPES" category on the bottow row gets pushed up and the whole menu moves to the right.

Does anyone know how this can be fixed?

Thanks in advance,

Olof

TOP MENU:

https://www.dropbox.com/s/n5slfgik5fvbto6/TopMenu.png?dl=0

TOP MENU WHEN SCROLLED DOWN:

https://www.dropbox.com/s/qpgmajon605ezn0/Topmenuscrolleddown.png?dl=0

hi lynx413 , you can add Z-INDEX property to this element

lynx413 · March 16, 2016

Hey thanks for your reply Apositivo.

Unfortunately I have no idea what Z-index is. I don't know much about coding, I'm just googling what I want to edit/change and copying and pasting

I tried to google Z-index but only got confused and don't know how to insert it.

Is it hard? If you or someone else feel you have the time I would be very grateful for help.

Thanks,

Olof

Edited March 16, 2016 by lynx413 (see edit history)

vanyeuan · June 3, 2016

Hi i want to share how i solved that for ps 1.6.1.3

I paste the following code in /themes/default-bootstrap/header.tpl

you can check the menu in my web http://tiendareveal.com

{literal}

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if ($(window).width() > 1182){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

if ($(window).width() > 974 && $(window).width() < 1183 ){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

if ($(window).width() > 750 && $(window).width() < 975){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

});

</script>

{/literal}

vanyeuan · June 3, 2016

Hi i want to share how i solved that for ps 1.6.1.3

I paste the following code in /themes/default-bootstrap/header.tpl

you can check the menu in my web http://tiendareveal.com

{literal}

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if ($(window).width() > 1182){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

if ($(window).width() > 974 && $(window).width() < 1183 ){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

if ($(window).width() > 750 && $(window).width() < 975){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});

} else {

$('.sf-menu').css({position: 'relative'});

}

});

</script>

{/literal}

eladkl · July 7, 2017

I, according to this code, I add it to the header.tpl and it's works for me! I would be happay if anyone can help me if it possible to make the whole header (what is on top of the horizontal menu) do be scroll down too.
I really appreciate your help.

Thanks for the answer

eladkl · July 10, 2017

Somebody?

apositivo · October 11, 2017

all fine ?

what do you need ?

[SOLVED] does any1 know how to make the "top horizontal menu" floating?

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