Remember me

Custom Sticky Menu

7 years 8 months ago #1

  • Greedbegone's Avatar
  • Greedbegone
  • Posts: 808
There is a site that has a menu that sticks when scrolling down (link: inspiredtravel.com/) When you get to the site, the menu isn't present, however when you scroll down it shows up and attaches itself to the top and sticks there... is that possible to do?

Thanks,
Matt

7 years 8 months ago #2

  • Radosław Dzimiński's Avatar
  • Radosław Dzimiński
  • Posts: 232
Hi!

you have to set header as fixed position. or add code in css. Or install 3rd part extensions with menu like mega menu

regards

7 years 8 months ago #3

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

you need for your header add custom class(custom-header) and select Position absolute,
after first full screen section add margin-bottom = height your header.

at the CSS editor add code:
.custom-header {
	margin-top: 100vh;
}

.custom-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    z-index: 10;
    right: 0;
}

at the JavaScript editor add code:
jQuery("document").ready(function($){
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() >jQuery(window).height()) {
			jQuery('.custom-header').addClass('fixed')
        }
        else{
          jQuery('.custom-header').removeClass('fixed')
            
        }
    });
});
Regards,
Vyacheslav, Balbooa.com

7 years 7 months ago #4

  • Tom's Avatar
  • Tom
  • Posts: 24
I am looking for the same but do not really get it.
Added the Code to the CSS and the Jscript to the template/header/section, but the sections below still scroll up and are visible behind the header.

7 years 7 months ago #5

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hello,

Did you do this:
you need for your header add custom class(custom-header) and select Position absolute,

Regards,

7 years 7 months ago #6

  • Greedbegone's Avatar
  • Greedbegone
  • Posts: 808
This works great! Question, is there a way to have it fade in rather than just appear quickly?

7 years 7 months ago #7

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

Please show an example.
We did as it was on your example

Regards,
Vyacheslav, Balbooa.com

7 years 7 months ago #8

  • Greedbegone's Avatar
  • Greedbegone
  • Posts: 808
Thank you again for the code... it's great! The example I showed had the menu on the bottom as you scrolled down the page and then it became sticky as you continue to scroll... ( inspiredtravel.com/ ) Is this an option?

Thanks,
Matt

7 years 7 months ago #9

  • Artem's Avatar
  • Artem
  • Posts: 11342
This solution will make absolutely the same menu as on your example B)
Vyacheslav wrote:
Hello,

you need for your header add custom class(custom-header) and select Position absolute,
after first full screen section add margin-bottom = height your header.

at the CSS editor add code:
.custom-header {
	margin-top: 100vh;
}

.custom-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    z-index: 10;
    right: 0;
}

at the JavaScript editor add code:
jQuery("document").ready(function($){
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() >jQuery(window).height()) {
			jQuery('.custom-header').addClass('fixed')
        }
        else{
          jQuery('.custom-header').removeClass('fixed')
            
        }
    });
});

7 years 7 months ago #10

  • Tom's Avatar
  • Tom
  • Posts: 24
thanks, now I got it - I had a typo in the custom-class box. It does now work for the pages below the first segment but the header does not show up at all on the "home"/start-section (www.goschuetz-consulting.com).

7 years 7 months ago #11

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hello Tom,

Can you please provide us more details about how you want to see your Main menu, and what you want to change there.

Please create new topic for your question

Regards,
Powered by Kunena Forum