Question 136967 in Html Question posted in
Some basic documentation can be found here.

Html – How to keep my header always on top when scrolling?

I need help! How to keep my header always on top when scrolling down? May I know Where and what should I insert to make the header including navigation menu static? See here : https://websitedemos.net/love-nature-02/services/

I’ve tried to insert anywhere, but it doesn’t work.

Tags:

2

Answers


  1. 0

    looks like you’re using WordPress, so first inspect your page to find the name of your header, in this case: site-header", next add this to your css (click the customize button when logged in to your WordPress and click custom CSS):

        .site-header {
    position: fixed;
    top: 0;
    width: 100%;
}

    Hope this helps!

    If that doesn’t work or it messes up the header, you could try using this plugin: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

    Login or Signup to reply.
  2. 0

    `

    $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 60) {
        $('#ast-desktop-header').addClass("fixed");
    } else {
        $('#ast-desktop-header').removeClass("fixed");
    }
});
    .fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  background:grey;
}
    <div id="ast-desktop-header" data-toggle-type="dropdown">
   <div class="ast-main-header-wrap main-header-bar-wrap ">
   ....................

    `Hi as i can see in your site, not only you have to fixed your header on top. you need to change your backgrund color also. when it will go down. add this fixed class and this js. it fill help you out.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search