I am trying to make my navbar for my tabs sticky so that when I scroll down the page to look at the items for each tab page.
The tab navbar stays in the same place so that I do not need to scroll up to change the selected tab.
I had tried sticky, and fixed on the nav part but that did not work.
<div className="grid grid-cols-1 gap-4 lg:col-span-3 ">
<div className="p-6">
<div className="relative">
<div className="relative sm:overflow-hidden">
<div className="hidden sm:block">
<div className="border-b border-gray-200">
<nav
className="-mb-px flex space-x-8 overflow-x-auto"
aria-label="Tabs"
>
Here's a snippet to your question, i suggest you make the parent container to be fixed and have its position top and left to be 0
export const Navbar = () => {
return (
<div className="top-0 left-0 p-4 fixed bg-black w-full">
<div className="flex justify-between">
<div>
<h2 className="font-bold text-lg">Logo</h2>
</div>
<div>
<ul className="flex gap-x-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
);
};
Related
Newbie here and just getting acclimated to Tailwind and CSS. I want to ensure the structure of my elements are correct prior to moving forward. I'm trying to create a dashboard consisting of i) a fixed top nav bar, ii) a fixed left sidebar and iii) a fixed submenu.
A couple questions:
At the moment I've hacked together something that works, but uncertain if I'll run into problems later on down the road. Are my fixed and flex divs sufficient to accomplish i through iii above?
The fixed submeu (id="sub-menu") I can't get to stay "sticky" relative to the top of the id="dashboard content"
Here's my code thus far. Would be grateful for any pointers or direct towards resources that elaborate on something similar.
<body>
<!-- Top Nav Bar -->
<nav class="sticky p-4 bg-myDarkGrey shadow-md top-0 z-50">
<div class="flex justify-between">
<!-- Logo Left Side -->
<div class="flex">
<img src="img/logo-placeholder.png" alt="" class="w-10 h-10" />
</div>
<!-- Profile Right Side -->
<div class="inline-flex">
<img
src="img/6991.png"
alt=""
class="rounded-full w-10 h-10 ring-2 ring-gray-50"
/>
</div>
</div>
</nav>
<!-- left nav bar -->
<div class="fixed w-1/5 bg-white h-screen shadow-sm top-0 mt-[72px]">
<div class="px-10 pt-20">
<h1 class="pb-5">Dashboards</h1>
<ul class="space-y-1 list-inside">
<li>Overview</li>
<li>Next Section</li>
<li>Next Section</li>
</ul>
</div>
</div>
<div id="dashboard-content" class="w-full bg-myBgGrey inline-block h-[1500px] pl-[20%] z-100">
<div id="sub-menu" class="relative top-0 bg-gray-500 w-full h-10"></div>
</div>
</body>
I'm building a laravel/tailwind dashboard but I'm now facing an issue with the overflow of an element.
The design I want to achieve is the follwing :
And what i achieved until now is the following:
With this code structure :
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0">
</nav>
<div class="flex max-h-full grid grid-cols-8">
<aside class="h-full flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
The issue
I would like to have only the body as scrollable ans keep the sidebar and the navbar in the same fixed position they are at any time.
Unfortunately, when i add the overflow-y-auto class to the div where the body is, the overflow is applied to the whole window breaking the design.
Do you have any suggestion on how i can make only the body scrollable with the above code base?
Thank you
Method 1: using fixed classes
Idea : make the nav and aside elements fixed
<body>
<div id="app" class="h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<aside class="h-screen fixed top-0 left-0 w-60 flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-4/5 ml-auto bg-gray-100 p-5 col-span-7 flex-1 overflow-y">
</div>
</div>
</body>
Method 2: using sticky class
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<div class="flex max-h-full grid grid-cols-8 relative h-screen overflow-hidden">
<aside class="h-screen flex col-span-1 sticky top-0" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full overflow-auto bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
You might have to experiment with the div widths as I am just roughly eyeballing the values with w-4/5 and w-60 classes.
I have a navbar on my site, when the site is on mobile size I want to have my hamburger menu overlap the contents of my page.
This is my site :
<!-- logo Start -->
<div class="nav-logo">
<h1>My site</h1>
</div>
<!-- links Start -->
<div
class=
"
w-full
flex
flex-col
items-center
text-5xl
md:pr-20
"
>
<a href="#"
class="block md:inline-block">Work</a>
<a href="#"
class="block md:inline-block">About</a>
<a href="#"
class="block md:inline-block">Contact</a>
<div/>
<!-- links End -->
</nav>
<main>
<article>
<h1>Hello<h1/>
</article>
<main/>
I tried adding relative and z-10 both on my nav-links and nav but they dont work, they still push the content downwards instead of having that div overlap.
Any suggestions on what to do?
You'll have to work with relative absolute and z-index to make this work.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Refer this for responsive sidebar with / without hamburger menu
How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.
<div className="relative w-full h-screen">
<div className="bg-green-400 w-full h-full z-0">
<p className="italic text-bold bd-red-100 font-serif">Map</p>
</div>
<div className="absolute z-50">
<p className="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
Here's a Tailwind Play Code I created based on your query. I have tweaked height and width for proper visual.
<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
<div class="bg-gray-400 w-96 h-96 relative z-0">
<p class="italic text-bold bd-red-100 font-serif">Map</p>
<div class="absolute inset-0 flex justify-center items-center z-10">
<p class="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
</div>
I would like to extend #Digvijay's answer further more to provide extended explanation, which consists
1. Logic
2. Responsive Sidebar
3. Responsive Sidebar with hamburger menu
You'll have to work with relative absolute and z-index to make this work.
1. Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Code:
<div class="h-screen relative z-0 flex bg-gray-500">
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Output:
Code Link: tailwind play
2. Responsive Sidebar
If you are aiming to build responsive sidebar which overlaps only on the mobile screen but would be normal div in the large screen then follow the below code.
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Code link : tailwind play
Output in large device:
Output in smaller device:
3. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
In the above code, I want only the div with class projects to be scrollable while holding the dates and footer fixed on their places. how to do that using tailwind.css ?! I also want the div with class main to be scrollable vertically while holding the other two divs fixed on their places without scrolling.
It sounds a bit like a common usage of overflow-y.
For example, you could add this CSS rule to your project's class:
.projects {
overflow-y: scroll;
}
You can add this rule to whichever container you want to be scrollable - in this case vertically.
On the other, there is overflow-x: scroll for horizontal scrolling, or overflow: scroll for both (shorthand).
According to tailwind overflow guide, you can use .overflow-y-auto for vertical scrolling.
e.g.
<div class="projects flex-grow overflow-y-auto px-4">
It's good that you have used .flex-grow otherwise you would have to give a max-height to the div.
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr/>
<div class="projects h-auto overflow-x-auto flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr/>
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>