Jump to content
Sign in to follow this  
Gabriel Marques

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

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...