return (
<nav className=" bg-violet-900">
<div >
<div className="flex justify-between py-12 px-5">
<h1 className="text-6xl text-white">AS</h1>
<div className=" text-white text-2xl lg:hidden">
<i onClick={click} className={navbar===false ? "fas fa-bars" :"fas fa-times"}></i>
</div >
</div>
<div className="">
<ul className={navbar===true ?" bg-violet-900 text-right text-white z-10 flex flex-col " :"hidden"}>
<Link className=" px-8 py-3" to='/'> Home</Link>
<Link className="px-8 py-3"to='/projects'>Projects</Link>
<Link className=" px-8 py-3"to='/about'>Resume</Link>
<Link className=" px-8 py-3"to='/about'>About</Link>
</ul>
</div>
</div>
</nav>
//this is my navbar for mobile responsiveness on scrolling the navbar doesn't fix on top of screen any help
<nav className="sticky top-0 bg-violet-900">
Might just do the job.
Related
I am trying to get the icons on the left side of the links. But in mobile view one or more icons shows on wrong line instead of beside the link. What should I do? Tailwind CSS or CSS might be possible to fix this. Help appreciated.
Code:
<div class="justify-center p-5 items-center">
<a class="flex justify-center title-font font-medium items-center text-gray-900">
<Link to="/">
<h1 class="ml-3 text-3xl text-center text-gray-500 hover:text-gray-400">Gaming News</h1></Link>
</a>
<span class="mt-2 mb-2 flex flex-wrap justify-center items-center ml-3 text-sm text-gray-500">The latest gaming news</span>
<nav class="md:ml-4 md:py-4 md:pl-4 flex flex-wrap items-center text-base justify-center">
<SiNintendoswitch/><Link class="ml-1 mr-5 hover:text-gray-400" to="/Nintendo">Nintendo</Link>
<FaPlaystation/><Link class="ml-1 mr-5 hover:text-gray-400" to="/Playstation">Playstation</Link>
<FaXbox/><Link class="ml-1 mr-5 hover:text-gray-400" to="/Xbox">Xbox</Link>
<HiDesktopComputer/><Link class="ml-1 mr-5 hover:text-gray-400" to="/PC">PC</Link>
<SiRetroarch/><Link class="ml-1 mr-5 hover:text-gray-400" to="/Retro">Retro</Link>
<GiRetroController/><Link class="ml-1 mr-5 hover:text-gray-400" to="/Indie">Indie</Link>
</nav>
</div>
</header>
I believe that what you need to do is to put both the Icon and its Link inside a div tag and give a className of flex, that way they will be a single unit and will always move together. Like so:
<div className="justify-center p-5 items-center">
<a className="flex justify-center title-font font-medium items-center text-gray-900">
<Link href="/">
<h1 className="ml-3 text-3xl text-center text-gray-500 hover:text-gray-400">
Gaming News
</h1>
</Link>
</a>
<span className="mt-2 mb-2 flex flex-wrap justify-center items-center ml-3 text-sm text-gray-500">
The latest gaming news
</span>
<nav className="md:ml-4 md:py-4 md:pl-4 flex flex-wrap items-center text-base justify-center">
<div className="flex">
<Icons.AcademicCap />
<Link className="ml-1 mr-5 hover:text-gray-400" href="/Nintendo">
Nintendo
</Link>
</div>
<div className="flex">
<Icons.Archive />
<Link
className="ml-1 mr-5 hover:text-gray-400"
href="/Playstation"
>
Playstation
</Link>
</div>
<div className="flex">
<Icons.AcademicCap />
<Link className="ml-1 mr-5 hover:text-gray-400" href="/Xbox">
Xbox
</Link>
</div>
<div className="flex">
<Icons.DesktopComputer />
<Link className="ml-1 mr-5 hover:text-gray-400" href="/PC">
PC
</Link>
</div>
<div className="flex">
<Icons.Wifi />
<Link className="ml-1 mr-5 hover:text-gray-400" href="/Retro">
Retro
</Link>
</div>
<div className="flex">
<Icons.AcademicCap />
<Link className="ml-1 mr-5 hover:text-gray-400" href="/Indie">
Indie
</Link>
</div>
</nav>
</div>
I hope this helps.
I am struggeling while trying to center my content vertical and horizontal within a nested div with tailwindcss.
<div class="flex flex-col items-center min-h-screen">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="grow w-full">
<div id="home" class="flex justify-center item-center min-h-max">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer<p>
</div>
</footer>
</div>
The code is also wrapped up here: https://play.tailwindcss.com/5B2w0RGQzm?size=540x1014
I already tried different height and min-height classes, but I am still failing...
https://tailwindcss.com/docs/height
https://tailwindcss.com/docs/min-height
What is the right approach to align everything centered?
try to dispatch your class otherwise and allow yourself to set flex (#child) into flex (from parent) , so it respects your idea and uses flex grid properties through your DOM levels.
Possible example below if i understood your issue:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex flex-column grow w-full justify-center items-center">
<div id="home">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom <p>
</div>
</footer>
</div>
other possible example:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex grow ">
<div id="home" class="flex grow ">
<main class="flex flex-column grow w-full justify-center items-center">
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom
<p>
</div>
</footer>
</div>
When I open my nav bar(for mobile version) on my first page it works fine and overlaps the contents (picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057465795874906/unknown.png
And when I open my navbar on the second page(forms page) the forms overlap the navbar.(picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057531591929876/unknown.png
How could I fix that?
My code for my navbar is:
import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {AiOutlineClose} from 'react-icons/ai';
import {NavLink} from 'react-router-dom';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/>
<ul className='hidden md:flex'>
<NavLink to="/" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Home</li></NavLink>
<NavLink to="/details" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>About</li></NavLink>
<NavLink to="https://www.google.com" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[35px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Host</li></NavLink>
<NavLink to="/info" activeClassName="active"><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[55px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600'>Tutorial</li></NavLink>
</ul>
<div onClick={toggle} className='block md:hidden'>
{!isOpen ? <AiOutlineClose size={20}/> : <GiHamburgerMenu size={20}/>}
</div>
<div className={!isOpen ? 'fixed left-0 top-1 w-[60%] h-full border-r border-r-gray-800 bg-gray-900 ease-in-out duration-500' : 'fixed left-[-100%] ease-in-out duration-500'}>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9 left-0'/>
<ul className='uppercase p-4'>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Home</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>About</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Host</li>
<li className='p-4 hover:border-b hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Tutorial</li>
</ul>
</div>
</div>
)
}
export default NavBar;
First page:
import React from 'react'
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
export const Welcome = () => {
return (
<div className="text-white">
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Web
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-indigo-600"
strings={["site", "Adam"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
A website that is focused on <a className="underline text-indigo-600">design</a> and
<a className="underline text-indigo-600"> simplicity</a>
</p>
<Link to="/details"><button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-white hover:ring-indigo-600 hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-700 hover:text-white hover:scale-110">
Create
</button></Link>
</div>
</div>
)
}
Forms Page:
Code from: https://tailwindui.com/components/application-ui/forms/sign-in-forms (First Form). So how could i make my navbar overlap my forms page?
Increase the z-index of the nav bar so that it is higher than that of the form.
You'll have to work with relative absolute and z-index tailwind classes to overlap the navbar on the contents of the page.
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
Extra. 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>
The card is not going under the navbar, however, the navbar is fixed.
Code for card:
<div class="w-full flex justify-center no-wrap">
<div class="bg-white p-8 rounded-lg shadow-lg relative hover:shadow-2xl transition duration-500">
<h1 class="text-sm text-gray-400 font-semibold mb-1"><%= #question.question_asked_on %>.</h1>
<h1 class="text-2xl text-gray-800 font-semibold mb-3"><%= #question.title %>.</h1>
<div class="w-full">
<p class="text-gray-600 leading-6 tracking-normal">
<%= #question.body %>
</p>
</div>
<button class="py-2 px-4 mt-8 bg-indigo-600 text-white rounded-md shadow-xl">Learn More</button>
</div>
</div>
</div>
Code for navbar
<nav class="bg-indigo-700 fixed inset-x-0">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
if you remove relative from the card it should go under the navbar.
Fiddle: https://play.tailwindcss.com/epT13JJxnk
It looks like this:
I need it to look like this:
How do I achieve it?
Fiddle code:
<div id="app" class=" border border-white
h-screen font-sans tracking-normal mt-10">
<nav data-v-5e628c52="" class="pt-2 md:pt-1
pb-1 px-1 mt-0 h-auto
fixed w-full z-20 top-0">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-between
m-3 p-2 pl-6 ">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-start"><a data-v-5e628c52="" href="#" class="header-item title-text light-text text-xl router-link-exact-active router-link-active" aria-current="page">Link1 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link2 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link3 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link4 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link5 </a></div>
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-end ">
<!----><!---->
<div data-v-5e628c52="">
<div data-v-24cf0f3c="" data-v-5e628c52="">
<div data-v-24cf0f3c="" class=" ">
<div data-v-24cf0f3c="" class="dropdown inline-block relative">
<button data-v-24cf0f3c=""><img data-v-24cf0f3c="" src="/img/some-image.png" class=" rounded-full border
border-gray-100 shadow-sm w-12
"></button>
<ul data-v-24cf0f3c="" class="right-0 dropdown-menu absolute hidden text-gray-800 pt-1">
<li data-v-24cf0f3c="" class=""><a data-v-24cf0f3c="" href="/user/test" class="rounded-t
py-2 px-4 block whitespace-no-wrap">Profile</a></li>
<li data-v-24cf0f3c=""><a data-v-24cf0f3c="" href="#" class="
py-2 px-4 block whitespace-no-wrap">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="main-content" class=" border border-red flex justify-center
flex-col items-center space-between min-h-screen w-full
mt-12 md:mt-12 pb-24 md:pb-5 p-5">
<div>
<div data-v-e33ade5c="" class=" ">
<div data-v-87eacdd8="" data-v-e33ade5c="" class="w-full shadow-xl rounded-sm
p-10 pb-5 m-10 pt-5 article flex flex-col
content-between flex-1 flex-grow " name="46">
<div data-v-87eacdd8="" class="flex flex-row justify-between">
<div data-v-87eacdd8="" class="cursor-pointer title-text article-title">last article</div>
<div data-v-87eacdd8="" class="article-date">4/22/2021</div>
</div>
<div data-v-87eacdd8="" class="pt-5 article-text ">last article</div>
<div data-v-87eacdd8="" class="flex flex-wrap mt-5 mb-2 ">
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="last" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> last</div>
</div>
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="yes" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> yes</div>
</div>
</div>
<div data-v-87eacdd8="" class=" font-bold light-text "> Comments: 0 </div>
<!---->
</div>
</div>
</div>
<div id="up-button" class=" sticky text-xl cursor-pointer
mt-auto ml-auto
bottom-5 right-5 rounded-lg p-5 "> UP </div>
</div>
<footer></footer>
</div>
EIDT:
I tried to add an extra wrapper with w-full as the answer suggests, but now the child div (gray) is too huge and goes outside the outer div id="app" (yellow). Also the UP button breaks: it's no longer small, but is very wide:
https://play.tailwindcss.com/8XBRUdNaX2
Change items-center to items-stretch on #main-content.
Remove w-full from the item div[name=46]
See example: https://play.tailwindcss.com/TZQHATbdll
Just need to add class to a div. Also, adjust some paddings and you are good to go.
<div id="main-content">
<div class="w-full">
The wrapper div needs a w-full class, too (as #Digvijay already pointed out). Then, some classes of the name="46" element must be removed, especially w-full, which applies a 100% width that is added to the padding defined on the element, adding up to more than 100%.
See the updated example: https://play.tailwindcss.com/1vDd7ToPLt
Remove items-center class from <div id="main-content">
Remove m-10 from <div class="" name="46">
Link