creating fixed menu bar

[Jiten rash (away)]

hello all lets create a j query fixed menu for your site

lets go straight first open header.tpl

and add some javascript

{literal}
<script type="text/javascript">
$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});
</script>
{/literal}

 

next open modules>blocktopmenu>blocktopmenu.tpl we just need to add a divsion

 

 

 

<div id="menu" class="default">
    <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" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div></div>

Note :Menu id name menu may conflict with other html tag in that case u need to change to other name and also on java script.

 

add this at blocktopmenu>css>superfish-modified>

.fixed {	position: fixed;	top: -1px;	left: 0;	width: 100%;}

DEMO note:  i have 980px menu not full width 100% but 100% recommenced.

[vekia]

nice solution Jiten, works like a charm

[Jiten rash (away)]

if u wud have look just a second later, u wud have seen something else..a fixed header after posting this i was editing header..and it was a fixed header.ok fine now.

 

 

.I changed the directory very easily from /bt to main domain im gonna post i soon.

 

and see order form is working fine now..

[nadie]

Very good contribution!

 

Thanks for the collaboration with the Community of Prestashop.

 

Sorry for my English.

[Jiten rash (away)]

thanks nadie

[rambabuy]

Thanks jiten 

I have modified in latest 1.5.6.1

But the menu bar scrolling behind all images, i mean when menu bar moving/ scrolling , this going behind all blocks or images not showing properly 

any modification still required ?  Please help me

 

Thanks

RY

[vekia]

Thanks jiten 

I have modified in latest 1.5.6.1

But the menu bar scrolling behind all images, i mean when menu bar moving/ scrolling , this going behind all blocks or images not showing properly 

any modification still required ?  Please help me

 

Thanks

RY

 

please share url, it will be much easier to help after inspection of your website and code there.

thanks in advance

[rambabuy]

please share url, it will be much easier to help after inspection of your website and code there.

thanks in advance

 working now , thanks 

[dolphspeed99]

Hi there,

 

I am having difficulties using this code. I really don't know JS or jQuery so I think I am doing something wrong.

 

I did this:

I added the JS code to the header.tpl file from my theme (www.mysite.com/mytheme/header.tpl. I tried adding the code before the head, in the head, with and without the {literal} tag, no matter what I do, when I check to see the page source I don't see this code. Therefore, the menu doesn't remain fixed. I checked and I have mo #menu on my main navigation menu so there's no conflict of same ids.

 

Could I get some help on this? I am using PS 1.6.

 

Thank you!

[dolphspeed99]

OK, so I finally managed to make this work. But I have some clarifications:

- insert the JavaScript code in the header.tpl file from the theme you are using (don't use the {literal} tags)

- add the "menu" id to the blocktopmenu.tpl located in your theme/modules/blocktopmenu. If you don't have this module under your theme, then add it in the original location

- the CSS code that must be added in the superfish.css file ... well it didn't work for me, so I added it to global.css, at the bottom of the file

- if you have a fixed width menu you'll have to remove the "left" attribute from CSS.

 

My code wasn't working because I added the "menu" id to the blocktopmenu located in the site's root. So when I added the #menu to the blocktopmenu located under my theme's modules, everything worked great!

 

Thank you so much Jiten rash for your contribution. I am using PS 1.6.0.9

Edited October 26, 2014 by dolphspeed99 (see edit history)

[faublak]

I will like to do the same for the menu which is Login, language and currency. Does anyone have idea how to do?

[vekia]

if you want to do it for whole "top" section

check this: fixed header in prestashop

[faublak]

Thanks. But it didn't work. I'm using 1.6.0.11 Version. 

[Alfredo Lozano]

Thanks. But it didn't work. I'm using 1.6.0.11 Version. 

Hi faublak,

 

Could you tell me if you've solved the problem and how did you do it? I have the same problem.

 

Thank You!!

[faublak]

Hi faublak,

 

Could you tell me if you've solved the problem and how did you do it? I have the same problem.

 

Thank You!!

Hola alberto. Yo lo pude hacer pero con el nav bar la barra superior negra, no se si te sirva. 

[Alfredo Lozano]

Muchas gracias faublak por tu rápida respuesta y en castellano!!

 

Voy a intentar hacer lo que propone dolphspeed99 para ver si funciona. He instalado la versión 1.6.0.13. Iremos hablando pq seguro que necesitaré ayuda. 

 

Os diré si todo va bien.

 

Gracias de nuevo!!! 

[faublak]

Muchas gracias faublak por tu rápida respuesta y en castellano!!

 

Voy a intentar hacer lo que propone dolphspeed99 para ver si funciona. He instalado la versión 1.6.0.13. Iremos hablando pq seguro que necesitaré ayuda. 

 

Os diré si todo va bien.

 

Gracias de nuevo!!! 

En efecto esa fue la solución que yo pude aplicar. Espero tengas suerte con ello. Un saludo..!

[miki22]

For Prestashop 1.6 i use:

<div id="page" style="position:relative; top:216px;">

and

<header id="header" style="position:fixed; background:#FFF; width:100%" >

[efrenawer]

Buenas tardes!

 

En mi caso funciona correctamente, pero tengo un problema... 

 

Tengo un menu muy extenso verticalmente y al desplegar no me permite desplazarme hacia las opciones del menu que estan por debajo (menos aun en la versión responsive).

 

Alguien sabe lo que podría hacer? Llevo un par de días con esto pero no consigo dar con la solución.

 

Muchas gracias!!!!

[faublak]

Buenas tardes!

 

En mi caso funciona correctamente, pero tengo un problema... 

 

Tengo un menu muy extenso verticalmente y al desplegar no me permite desplazarme hacia las opciones del menu que estan por debajo (menos aun en la versión responsive).

 

Alguien sabe lo que podría hacer? Llevo un par de días con esto pero no consigo dar con la solución.

 

Muchas gracias!!!!

Hola efrenawer, puedes por favor colocar el link de tu sitio para poder verificar cual puede ser tu problema. Gracias y un saludo. 

[efrenawer]

Ya lo solventé!

 

Añadí lo siguiente al css:

    overflow-y:scroll;

    height:100%;

 

.fixed {
    position: fixed;
    top: -1px;
    left: 0;
    width: 100%;

    overflow-y:scroll;

    height:100%;

}

 

Gracias por contestar!!

[faublak]

Que bueno! efrenawer esperamos que cualquier otra duda que tengas la puedas solucionar por este medio. Estamos para ayudarte. 

[marbeweb]

Hola a todos.

 

Me gustaria saber como podría hacer el menu fixed al estilo the este foro.

Es decir con un logo y el efecto JavaScript que tiene.

 

Muchas gracias.

[PascalVG]

Hi all contributors to this topic,

We're in the English forum. Please keep posting in English here. Then other (English speaking) users can re-use your solutions too.

 

Thanks,

pascal.

[marbeweb]

Excuse me for the question in Spanish, I did it due to I thought I could do it in every language.

I hope next time do the firts question in english rather than other different language.

Nevertheless do you know how to do an menu like the fixed menu from this forum?

Thank.

[PascalVG]

Hi Marbeweb,

 

There is a specific subforum part for English language here :

https://www.prestashop.com/forums/forum/82-foro-en-espa%C3%B1ol/

 

 

To answer your question:

You could do some test on how much you scrolled away from the top edge and adapt the css accordingly (maybe add/remove a class to the element, which in turn changes the div height, and maybe display:none's some elements to hide them from view. And maybe zoom/resize the image a little.

 

Here an example on how to check for scrolling x amount away from the top

 

<script>

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) {
    $('.fixedelement').css({
      'display': 'none'         // example css change...
    });
  }
});

</script>

 

 

Hope this helps,

pascal.

[tutiendaplacer]

Hola, Alguien sabe como puedo fijar el menu en prestashop 1.6.......... he intentado lo que dicen al comienzo de este tema pero no me funciona..... Muchas Gracias