cssreactjstailwind-cssremix.runtailwind-elements

tailwind CSS applied on react component moves the navigation bar along in remix

I created a React component called MainNavigation and using it under my root.tsx as my main navigation for my remix project.

enter image description here

when I apply my CSS to another react component which isnt even a part of main navigation, somehow my main navigation bar moves along with it. Also the components are overlapping with the navigation instead of respecting each others boundaries.

MainNavigation ul class,

<ul className="border border-blue-400 flex fixed w-screen mx-auto my-auto py-3">

should be respected by the other components such as,

X component,

<section className="container mx-auto">

As soon as I add m-2 on X component, i.e.,

<section className="container mx-auto m-2">

the navigation bar moves below,

enter image description here

instead of staying on top. How can I fix this? thanks

Solution

  • After updating MainNavigation ul class from fixed param to sticky, as per the comment above, everything falls in the right place.

    Instead of,

    <ul className="border border-blue-400 flex fixed

    Use,

    <ul className="border border-blue-400 flex sticky