Jump to content
sooroos

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

Recommended Posts

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 by sooroos (see edit history)

Share this post


Link to post
Share on other sites

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 :) ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

the other stuff can't remain normal?

 

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

Edited by sooroos (see edit history)

Share this post


Link to post
Share on other sites

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 by sooroos (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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 !

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

 

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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 by apositivo (see edit history)

Share this post


Link to post
Share on other sites

 

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 license@prestashop.com 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 <contact@prestashop.com>

*  @copyright  2007-2015 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>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->

<!--[if IE 8]><html class="no-js lt-ie9 ie8"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->

<!--[if gt IE 8]> <html class="no-js ie9"{if isset($language_code) && $language_code} lang="{$language_code|escape:'html':'UTF-8'}"{/if}><![endif]-->

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

    <head>

        <meta charset="utf-8" />

        <title>{$meta_title|escape:'html':'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 name="generator" content="PrestaShop" />

        <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />

        <meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <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}" />

        {if isset($css_files)}

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

                <link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />

            {/foreach}

        {/if}

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

            {$js_def}

            {foreach from=$js_files item=js_uri}

            <script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>

            {/foreach}

        {/if}

        {$HOOK_HEADER}

 

        <!--[if IE 8]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

        <![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}

            <div id="restricted-country">

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

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

        {/if}

        <div id="page">

            <div class="header-container">

                <header id="header">

                    <div class="banner">

                        <div class="container">

                            <div class="row">

                                {hook h="displayBanner"}

                            </div>

                        </div>

                    </div>

                    <div class="nav">

                        <div class="container">

                            <div class="row">

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

                            </div>

                        </div>

                    </div>

                    <div>

                        <div class="container">

                            <div class="row">

                                <div id="header_logo">

                                    <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

                                        <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

                                    </a>

                                </div>

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

                            </div>

                        </div>

                    </div>

                </header>

            </div>

            <div class="columns-container">

                <div id="columns" class="container">

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

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

                    {/if}

                    <div id="slider_row" class="row">

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

                    </div>

                    <div class="row">

                        {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}

                        <div id="center_column" class="center_column col-xs-12 col-sm-{$cols|intval}">

    {/if}

 

Edited by rololo88 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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 by lynx413 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by lynx413 (see edit history)

Share this post


Link to post
Share on other sites

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}
        <script type="text/javascript"> 
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}

Share this post


Link to post
Share on other sites

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}
        <script type="text/javascript"> 
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}

Share this post


Link to post
Share on other sites

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

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