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
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
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 have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
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>
I am using tailwind in my Vuejs app. I have this simple template
<template>
<div class="bg-gray-500 h-screen">
<Header /><!-- //height 32 -->
<div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
<router-view />
</div>
</div>
</template>
The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32
The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).
What I want to do
If there is no content, I want the second div to fill the remaining height of the screen but no more.
If there is content, I want it grow as necessary.
You can leverage .flex, .flex-col and .flex-1 for this. Check out docs.
<div class="bg-gray-500 flex flex-col h-screen">
<div class="flex h-32 bg-gray-200"></div>
<div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
<router-view />
</div>
</div>
Usage of flex-1 is optimal for your solution to expand a certain component in the parent:
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
Vertically
<div class="flex h-screen flex-col">
<div class="h-50 bg-cyan-400 text-center text-4xl">Header</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output:
Horizontally
<div class="flex w-screen ">
<div class="h-50 bg-cyan-400 text-center text-4xl">NavBar</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output: