Jump to content

How to fix menu at top without hiding the page's content


Gabriel Marques

Recommended Posts

I'm trying to fixate a menu in the top of my page, in a form that i scroll down it continues afixated, although when i use the "w3-top" class in my menu, the page's content ends up behind it
How do so it stays below the menu?

With the "w3-top" class:
print.thumb.png.3935a0278045f2408c881391f11c1b1f.png

 

 

Without the "w3-top" class:

1843914439_print2.thumb.png.c8998f5d23ba77811cd40a4a62555608.png

Link to comment
Share on other sites

One possible solution is to give top padding to the container of the main content which is equal to the height of the header.

Link to comment
Share on other sites

  • 1 month later...

I have the same issue. I believe the default solution is to add some <br>  or setting a margin on the top of the page and that's good enough for layout but that doesn't help if you use bookmarks with id: when you follow a link to an element with <a href="#example">, this will show the <div id="example"> on the very top of the page, where it will be covered by the w3-top class.

I know it's a bit silly and not a huge problem but I'd like the user to get to read the bookmark without scrolling the w3-top class out of the way.

Does anybody have any idea on how to solve it?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...