Need help with sticky menu (header)

What’s up people!

I’m working on this website and I wanna make the header bar sticky with NO plugins. So I’m trying with some CSS code that I’ve seen it works fine for other people but in my case it just doesn’t want to work fine.

**The problem is with mobile version**.

For some reason the header looks too high, like “cut” with this code:

.main-header-bar {

position: fixed;

width: 100%;

z-index: 99999;

top: 0;

​

So I decided to remove the “*top: 0;*” part and it looks like this:

​

There is a space between the header and the top of the web. I tried to add a “padding” to full that void but it just doesn’t work, the padding just doesn’t show.

Any ideas of why is this happening and how can I solve it?

I’ll appreciate any help, A LOT! Thanks!

In case you need to know, **this is my full code:**

.main-header-bar {

position: fixed;

width: 100%;

z-index: 99999;

\#content.site-content {

margin-top: 68.63px (this is my header size in mobile version)

1 Comment
  1. Try using

    position:absolute.

    It should only goto fixed when scrolling is triggered via Javascript.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer