With Tailwind CSS, how could I make a button that stays at the bottom of the page while scrolling?
Something similar to the "Sign up for free" button at Basecamp.
In Tailwind CSS you can use position of fixed. To make it show on response to the scroll, you'll be needing JavaScript or jQuery.
<div class="">
<!-- Hello divs to make the div scroll -->
<div class="fixed bg-blue-600 bottom-0 rounded-full text-white text-2xl right-0 p-4 m-20">Sign Up For Free</div>
</div>
Tailwind-play
Related
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>
I using tailwind-overflow, for horizontal scroll in right side.
Bellow example of my code:
<div className="bg-red-300">
<div className="bg-red-400">
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto">
<div className="flex space-x-2">
<div>Explore:</div>
<div className="font-bold underline">Shoes</div>
<div className="font-bold underline">Clothing</div>
<div className="font-bold underline">Accessories</div>
<div className="font-bold underline">Premium</div>
<div className="font-bold underline">Sport</div>
<div className="font-bold underline">Shop All</div>
</div>
</div>
</div>
</div>
#1 Why word Shop All was break, when screen is mobile? How fix is it?
screenshot:
demo: https://superb-pothos-b7b687.netlify.app/tailwind-overflow
#2 How I can hide scroll in tailwind?
#1 Whitespace
In order to disable the breaking of your words, you can simply use Whitespace.
It looks like the class you might want to use here is whitespace-nowrap. You can either apply it to your whole document or simply to a specific div:
<div className="font-bold underline whitespace-nowrap">Shop All</div>
#2 Hide Scroll-bar
To hide the scrollbar you can use Overflow.
overflow-hidden will hide both horizontal and vertical scrollbars.
overflow-x-hidden will hide the horizontal scrollbar (which is what you need here).
overflow-y-hidden will hide the vertical scrollbar.
In your code it can be implemented this way:
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto overflow-hidden">
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
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
I am using tailwind css vanilla and I want to create a navbar inside the flex item that I have assigned as the visual page header content placeholder.
I encounter a problem while working on this, I have added padding all around with p-8 to the navbar element and I have notice that the navbar is overflowing over the flex item that is holding it.
I do not understand why is this behavior happening because I have added overflow-hidden to the flex item that is holding the navbar. Padding is not considered to be content?
I have tried different combination with display property and also with positioning, all without any result, therefore I need some help.
This is what I have done so far.
<link href="https://unpkg.com/tailwindcss#2.0.3/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto px-4 h-screen">
<div class="flex flex-col h-full content-start">
<div class="flex-grow w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
<nav class="p-8">
<a class="" href="#">
Home
</a>
<a class="" href="#">
Products
</a>
<a class="" href="#">
Discounts
</a>
<a class="" href="#">
Customers
</a>
</nav>
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-full">
<!-- Column Content -->
2
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-5">
<!-- Column Content -->
3
</div>
</div>
</div>
Thank you!
L.E. If you shrink the browser, the when the flex column item shrinks it overlaps the previous item. I have shrieked the browser window and I have notice that element 1 of the flex box is going under element 2 and if I go further I'm left only with element 3, the other 2 are going behind the last element 3 of the flex-box.