I created this dropdown menu in Tailwind CSS but it takes on the whole area of the navbar background instead of being above or atleast outside of it on hover. I'm new to tailwind and have tried going through documentation in such of helpful utility classes but all to no avail.
This is my code snippet below[This is before HoverThis is after Hover](https://i.stack.imgur.com/qj85E.png)
<!-- Menu NavBar-->
<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div>
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg ">
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</nav>
I tried adding a z index but it did not work
You can achieve that by adding position classes. The container of the links menu needs the absolute class, and the container of that, needs the relative class so it doesn't completely escapes the page structure. You can read more about the position css property here and how to use the position classes in tailwind here
<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div class="relative"> <--here--<<
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="absolute hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg "> <--here--<<
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</nav>
Related
I have items that are listed in a container with overflow-y-scroll and each item has a tooltip that needs to be displayed to the right of the list item but outside of the container.
I followed this article and managed to implement something similar with Tailwind. See Tailwind Play. The problem is that the tooltips positions are incorrect after scrolling. (I assume it's because the list item is static)
How can I make the tooltip move with the list item as it scrolls? Is there a better way to do this?
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-screen items-center justify-center">
<div class="relative">
<ul class="h-24 w-24 space-y-3 overflow-y-auto overflow-x-hidden rounded-md border bg-gray-100 py-2 px-4">
<li class="group static cursor-pointer">
Item 1
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 1</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 2
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 2</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 3
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 3</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 4
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 4</p>
</div>
</li>
</ul>
</div>
</div>
I'm using Tailwind CSS along with Font Awesome Icons. Here the icons show like this,
Is it not suitable to adjust every div's width. Here is my code (For an element),
<!-- Navigation Link-->
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags"></i>
</div>
<div>Products</div>
</div>
</div>
<!-- End Navigation Link-->
My question is how to adjust this without changing every single element.
Add fa-fw class to the icon, see more info about Fixed Width Icons
Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width.
console.clear()
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags fa-fw"></i>
</div>
<div>Products</div>
</div>
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fa-brands fa-fw fa-windows"></i>
</div>
<div>Dashboard</div>
</div>
</div>
FontAwesome has a class for this fa-fw which will make an icon square, this is applied to each icon along with the variant and name class, so like fa-solid fa-fw fa-file-lines for example
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="text-white bg-stone-900 inline-flex flex-col" style="--fa-animation-duration: 1.5s; --fa-animation-iteration-count: 3; --fa-animation-timing: ease-in-out">
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-brands fa-fw fa-windows fa-beat"></i>
Dashboard
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-file-lines fa-beat"></i>
Documents
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-tags fa-beat"></i>
Products
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-cube fa-beat"></i>
Stock
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-brands fa-fw fa-windows"></i>
</div>
<div>Dashboard</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-file-lines"></i>
</div>
<div>Documents</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-tags"></i>
</div>
<div>Products</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-cube"></i>
</div>
<div>Stock</div>
</div>
</div>
I need to have a screen that has top bar as a menu, that is a ul of my-10, and the rest of the screen is a div with a background image. Together they should cover h-screen.
What classes should I give to the nav, and what to the div containing the image?
Thanks
You can achieve this by display type of flex.
For your scenario:
Use a navand a div which is inside the parent element of flex flex-col h-screen
And then give following classes for nav and div
nav -> flex
div -> flex-1
Try the following simple code:
<div className="flex flex-col h-screen">
<nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
<div class="logo">
<h1 class="text-black ml-4 cursor-pointer text-2xl">Logo here</h1>
</div>
<ul class="flex">
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-home"></i> Home
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-question"></i> About
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-reply"></i> Contact
</a>
</li>
</ul>
</nav>
<div className="flex-1 bg-black">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
className="min-w-full min-h-full"
alt="..."
/>
</div>
</div>
Output:
For more information about the flex class refer https://tailwindcss.com/docs/flex
I would like for the color-swatch to fill the space it has been set at in the CSS (width: 40px) and for the swatch label to shrink. But the problem is: if the label is a long word like "Corn flower blue", the color-swatch shrinks in size not keeping its width.
The HTML below uses Bootstrap 4 classes. I have tried to add flex-fill and flex-grow-1 to the color-swatch and flex-shrink-1 to the swatch label but none of these combinations work
https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink
Here is a working example in Codepen
https://codepen.io/ben_jammin/pen/Vwadqqb
.container {
background-color:red;
}
.sidebar {
width:280px;
padding:1.5rem;
background-color:#efefef;
}
li {list-style-type: none;}
.color-swatch {width:40px; height:40px;}
<div class="container">
<div class="sidebar">
<ul class="swatches d-flex flex-wrap m-0 pl-0" role="menu">
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:black;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2 d-flex">Black</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:blue;"></span>
<!-- Swatch Label -->
<span class="stacked label d-flex ml-2">Blue</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:cornflowerblue;"></span>
<!-- Swatch Label -->
<span class="stacked label d-flex ml-2">Corn flower blue</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:forestgreen;"></span>
<!-- Swatch Label -->
<span class="stacked label d-flex ml-2">Forest green</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:gray;"></span>
<!-- Swatch Label -->
<span class="stacked label d-flex ml-2">Gray</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch d-flex flex-grow-1" style="background-color:darkblue;"></span>
<!-- Swatch Label -->
<span class="stacked label d-flex ml-2">Midnight Blue</span></a>
</li>
</ul>
</div>
</div>
The bootstrap classes d-flex and flex-grow-1 on your swatches are overriding your css styling.
Try removing those and adjusting the sizes of your swatches and labels how you'd like.
You are just using the wrong combination of flex classes.
Adding flex-grow-1 to the color-swatch and flex-shrink-1 to the label tells the swatch to use all the available space it can, and the label to shrink if it can. This isn't exactly the behaviour you want... What you really want to do is tell the color-swatch not to shrink.
You can do this using the flex-shrink-0 class. Adding this to all your color-swatch elements will keep them at 40x40px and let the label use whatever space is left. You also don't need the d-flex on either color-swatch or label:
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:black;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Black</span>
</a>
You might also want to add align-items-center to your ul element also -"cornflower blue" wraps to 2 lines so this will vertically centre "Forest Green".
Working Example:
.container {
background-color: red;
}
.sidebar {
width: 280px;
padding: 1.5rem;
background-color: #efefef;
}
li {
list-style-type: none;
}
.color-swatch {
width: 40px;
height: 40px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="sidebar">
<ul class="swatches d-flex flex-wrap m-0 pl-0 align-items-center" role="menu">
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:black;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Black</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:blue;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Blue</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:cornflowerblue;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Corn flower blue</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:forestgreen;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Forest green</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:gray;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Gray</span></a>
</li>
<li class="swatch mb-2 col-6 px-0">
<a class="d-flex align-items-center" href="#">
<!-- Swatch -->
<span class="color-swatch flex-shrink-0" style="background-color:darkblue;"></span>
<!-- Swatch Label -->
<span class="stacked label ml-2">Midnight Blue</span></a>
</li>
</ul>
</div>
</div>
I have created a structure for a header and a sticky top navbar.
When we scroll down (medium screen and up), there is always a space line between my header and my navbar. We can see the body in that space.
Picture of the thin space line in yellow
I saw this come from the 3 buttons because when we deleted them, the space disapears but I don't know how to solve the problem.
Any idea ?
Please find my code
Thank you
SOLVED
The problem came from the a class bottom border. I think they didn't fit in the parent element.
Code after correction
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container-fluid bg-danger">
<div class="row">
<div class="col-md-6 my-auto">
<a class="d-flex justify-content-center align-items-center" href="#">
<h1 class="text-center"><span class="ft-color-1">BRAND NAME</span></h1>
</a>
</div>
<div class="col-md-6 p-2">
<ul>
<li>Adress, city</li>
<li>Ouvert 7/7 de 7h à 21h</li>
</ul>
<div class="d-none d-md-flex flex-row mb-2">
<a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Itinéraire</a>
<a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Contact</a>
<a class="btn p-1 mr-0 w-100 bg-primary text-left" href="" role="button"> Suivez-nous</a>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-md sticky-top bg-primary" id="navigation-barre">
<a class="navbar-brand text-white" href="#"> Brand name</a>
</nav>
<section class="bg-warning">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</section>