Skip to content

How can I add a sticky on top? #188

Answered by Knogobert
icepcp asked this question in Q&A
Discussion options

You must be logged in to vote

I'd suggest learning up on some more HTML & CSS to achieve something like this. Then going into the way that Tailwind helps out in making it quicker to add different CSS styles by using classes.

But anyways, I'll help you out a little.

A quick solution for you is to add this as a start before the main navigation in the header:

<div role="banner" class="fixed top-0 inset-x-0 py-3 px-3 bg-gray z-50">This is a sticky bro (aka. banner)</div>

Then to knock down the main navigation a little bit, one way is to add a custom tailwind CSS class.
Add mt-[54px] to your main nav.

<nav aria-label="Main Menu" class="scrim-bg fixed z-40 top-0 inset-x-0 pt-3 px-3 mt-[54px]">

It will add margin-top: 54px;

Replies: 2 comments

Comment options

You must be logged in to vote
0 replies
Answer selected by icepcp
Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants