How can i make my menu stick at the top?


#1

Hello, everyone!

i am using MBT drop down menu, but i want it to be sticky at the top even user scrolls down.

I tried to set the position to fixed, but it is not sticking.

Any help would be appreciated greatly for evaluation site name Access site from here

thank you

sam k


#2

Hey @SamaraSsr, basically you are just not doing everything that is required. I will like you to add z-index: 99999; and position: fixed; in #menu for the non-responsive design. For responsive design please do add color: black; on the #menu which is under @media screen and (max-width: 800px). Also add color: black; in #menu input:checked + label. However, this is not a good way to create fixed menus. I will like you to add few jQuery code in your template to make the whole thing so easy and flexible. You can use this small script to do the same task easily:

[code]$(window).scroll(function() { var windscroll = $(window).scrollTop(); if (windscroll >= 100) { $(’#menu’).css({‘position’: ‘fixed’, ‘z-index’: ‘9999’});

} else {

    $('#menu').css('position','relative');
}

})[/code]


#3

done according to your steps the result is HERE


#4

I don’t think it worked for you because I saw your blog. Instead of using that scroll javascript, we can easily use CSS for doing the work. See this template in mobile version:

:link: Blogger Guiders Demo Template

Now tell me, do you want this like menu?


#5

of course who wouldn’t want that one

its clean and nice

can you help me?


#7

@HusnainMz nice job, only added width and its work fine try it @SamaraSsr


#8

thanks but it didn’t worked well :frowning:


#9

give me your blogger xml file i will try fix it


#10

Okay so, @SamaraSsr, firstly find this id:

#navitions {

You will find some thing like this:

#navitions {
    /* some thing here */ 
}

So, you just have to add these to lines above the ending }:

    position: fixed;
    width: 100%;
    z-index: 99999999;
}

So, it will be like this:

#navitions {
    /* some things here */
    position: fixed;
    width: 100%;
    z-index: 99999999;
}

Note: I have added the z-index value to make the menu bar at most-front.

@HusnainMz’s solution will also work for you but I think it is difficult for you. That script is extremely works great when you are going to add a notification bar which sticks only when we scroll out it. :smile:


#11

thanks for the help, but after implementing all the codes menu bar is blocking the title of the blog.

Any solutoins?


#13

Replace this;

#header-wrapper {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 28px;
}

with this:

#header-wrapper {
    margin: 0 auto;
    overflow: hidden;
    padding-top: 95px!important;
    padding: 0 28px;
}

#14

thanks man that worked with out any issues!