I want to overlap my image to the transparent header? how can I do that without margin-top: -36px in section? thanks
<header class="bg-transparent shadow-md sticky top-0 z-50">
<div class="flex items-center justify-between">
<img class="h-8" src="/images/eco2.png" alt="">
<div class="border-2 border-red-500">
<a class ="" href="#">Home</a>
<a class ="" href="#">About Us</a>
<a class ="" href="#">Contact Us</a>
<a class ="" href="#">Projects</a>
</div>
</div>
<div class="flex flex-col hidden">
Home
About Us
Contact Us
Projects
</div>
</header>
<section class="h-screen w-full bg-hero-pic" >
</section>
Try this, Tailwind Playground Link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
<title>Tailwind Header by JsWizard</title>
<!---
You may need jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
--->
<style>
/*
You may need this for responsive background
header {
background: url('bg-425.jpg');
}
#media only screen and (min-width:640px) {
header {
background: url('bg-640.jpg');
}
}
#media only screen and (min-width:768px) {
header {
background: url('bg-768.jpg');
}
}
#media only screen and (min-width:1024px) {
header {
background: url('bg-1024.jpg');
}
}
#media only screen and (min-width:1025px) {
header {
background: url('bg-max.jpg');
}
} */
header {
background:url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80');}
</style>
</head>
<body>
<nav id="nav" class="fixed inset-x-0 top-0 flex flex-row justify-between z-10 text-white bg-transparent">
<div class="p-4">
<div class="font-extrabold tracking-widest text-xl">Your Logo</div>
</div>
<!-- Nav Items Working on Tablet & Bigger Sceen -->
<div class="p-4 hidden md:flex flex-row justify-between font-bold">
<a id="hide-after-click" href="#home" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Home</a>
About
Contact Us
Products
</div>
<!-- Burger Nav Button on Mobile -->
<div id="nav-open" class="p-4 md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</div>
</nav>
<!-- Opened Nav in Mobile, you can use javascript/jQuery -->
<div id="nav-opened" class="fixed left-0 right-0 hidden bg-white mx-2 mt-16 rounded-br rounded-bl shadow z-10">
<div class="p-2 divide-y divide-gray-600 flex flex-col">
Home
About
Contact Us
Products
</div>
</div>
<header id="up" class="bg-fixed bg-no-repeat bg-center bg-cover h-screen relative">
<!-- Overlay Background + Center Control -->
<div class="h-screen bg-opacity-50 bg-black flex items-center justify-center" style="background:rgba(0,0,0,0.5);">
<div class="mx-2 text-center">
<h1 class="text-gray-100 font-extrabold text-4xl xs:text-5xl md:text-6xl">This is sample Header design</h1>
<h2 class="text-gray-200 font-extrabold text-3xl xs:text-4xl md:text-5xl leading-tight">by JsWizard</h2>
<div class="inline-flex">
<button class="p-2 my-5 mx-2 bg-indigo-700 hover:bg-indigo-800 font-bold text-white rounded border-2 border-transparent hover:border-indigo-800 shadow-md transition duration-500 md:text-xl">Learn More</button>
</div>
</div>
</div>
</header>
</body>
</html>
You can use position fixed instead of sticky, fixed will remove the div item from the flow which will make the next div (your picture) take its place.
You can add w-full and all other styles you need.
<header class="bg-transparent fixed shadow-md w-full z-50">
If you don't want it to have the behavior of sticky just use absolute instead, absolute also removes it from the flow but the main difference absolute change position according to it's parent and it stays there, fixed keeps its position according to the screen not parent.
Related
How do I keep my header, left/right sidebar sticky on scroll (on desktop, not mobile)?
It doesn't seem to be working with the fixed or sticky class, I've posted an example here: https://play.tailwindcss.com/Bj68nUJj1C.
<!-- Background color split screen for large screens -->
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative flex min-h-screen flex-col">
<!-- Navbar -->
<nav class="flex-shrink-0 bg-indigo-600">
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<!-- Logo section -->
<div class="flex items-center px-2 lg:px-0 xl:w-64">
<div class="flex-shrink-0">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300" alt="Workflow" />
</div>
</div>
<!-- Search section -->
<div class="flex flex-1 justify-center lg:justify-end">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">Search projects</label>
<div class="relative text-indigo-200 focus-within:text-gray-400">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon name: mini/magnifying-glass -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<input id="search" name="search" class="block w-full rounded-md border border-transparent bg-indigo-400 bg-opacity-25 py-2 pl-10 pr-3 leading-5 text-indigo-100 placeholder-indigo-200 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-sm" placeholder="Search projects" type="search" />
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-400 hover:bg-indigo-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/bars-3-center-left
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x-mark
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Links section -->
<div class="hidden lg:block lg:w-80">
<div class="flex items-center justify-end">
<div class="flex">
Documentation
Support
</div>
<!-- Profile dropdown -->
<div class="relative ml-4 flex-shrink-0">
<div>
<button type="button" class="flex rounded-full bg-indigo-700 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-700" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="" />
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
View Profile
Settings
Logout
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- 3 column wrapper -->
<div class="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8">
<!-- Left sidebar & main wrapper -->
<div class="min-w-0 flex-1 bg-white xl:flex">
<div class="border-b border-gray-200 bg-white xl:w-64 xl:flex-shrink-0 xl:border-b-0 xl:border-r xl:border-gray-200">
<div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0">
<!-- Start left column area -->
<div class="relative h-full" style="min-height: 12rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End left column area -->
</div>
</div>
<div class="bg-white lg:min-w-0 lg:flex-1">
<div class="h-full py-6 px-4 sm:px-6 lg:px-8">
<!-- Start main area-->
<div class="relative h-full" style="min-height: 36rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End main area -->
</div>
</div>
</div>
<div class="bg-gray-50 pr-4 sm:pr-6 lg:flex-shrink-0 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0">
<div class="h-full py-6 pl-6 lg:w-80">
<!-- Start right column area -->
<div class="relative h-full" style="min-height: 16rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End right column area -->
</div>
</div>
</div>
</div>
You need to use top-X class together with sticky. For navbar sticky top-0 and for sidebar something like sticky top-20 should work.
Prefix it with corresponding breakpoint prefix to apply it only for bigger screens.
You can try using grid instead of flex and change your layout a bit to achieve this.
<script src="https://cdn.tailwindcss.com"></script>
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative grid grid-cols-[2rem_1fr_2rem] xl:grid-cols-[minmax(2rem,1fr)_16rem_minmax(200px,calc(80rem-32rem))_16rem_minmax(2rem,1fr)] lg:grid-cols-[2rem_minmax(200px,calc(100%-16rem))_16rem_2rem] min-h-screen">
<!-- Navbar -->
<nav class="min-h-[4rem] sticky top-0 z-10 col-[1/-1] row-[1] flex justify-center items-center bg-indigo-600 text-white">
Nav
</nav>
<aside class="max-h-screen xl:sticky lg:static top-12 col-[2] row-[2] border-b border-gray-200 bg-white xl:border-b-0 xl:border-r xl:border-gray-200">
<div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0">
<!-- Start left column area -->
<div class="relative h-full" style="min-height: 12rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Aside
</div>
</div>
<!-- End left column area -->
</div>
</aside>
<main class="bg-white col-[2] row[3] xl:col-[3] xl:row-[2] min-h-[150vh]">
<div class="h-full py-6 px-4 sm:px-6 lg:px-8">
<!-- Start main area-->
<div class="relative h-full" style="min-height: 36rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Main
</div>
</div>
<!-- End main area -->
</div>
</main>
<aside class="max-h-screen sticky top-12 col-[2] row-[4] xl:col-[4] xl:row-[2] lg:col-[3] lg:row-[2/2_span] bg-gray-50 pr-4 sm:pr-6 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0">
<div class="h-full py-6 pl-6">
<!-- Start right column area -->
<div class="relative h-full" style="min-height: 16rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Aside
</div>
</div>
<!-- End right column area -->
</div>
</aside>
</div>
I try to solve your problem,
you can check here
So this is the code I am working with:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I am having issues getting the image to constrain to the parent div. What I want to accomplish is to have the user image constrain inside the parent div and not overflow outside the border. The image attached is what it looks like now. I have no idea what I am doing wrong or missing.
make it a flexbox container
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
OR CSS grid:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 grid">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0 h-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
Use flex flex-col on parent container and add min-h-0 to image.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I need to programm the following design
I want to give the big image in the middle (dark red) the rematining space of my flexcontainer, where the yellow stuff is margin/paddings. The problem i have here is, that my image always overlapps the flex container and also the images in the bottom and the svgs. I dont want to give the image a fixed height nor some percentage values because i want to keep it responsive and dynamicaly. Here is my code:
<div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
<div class="flex h-3/4 justify-center items-center">
<svg
</svg>
<img
class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
My Big Image
/>
<svg
</svg>
</div>
<div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
<div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
<img
the orange images
/>
</div>
</div>
</div>
The best solution here would be for me to remove every heights and only work with flex flex-1 flex-shrink and so on but its not working properly as expected.
You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).
It does not matter if you use SVG or not for buttons. But if you have any problem with them - please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).
Demo: https://play.tailwindcss.com/RsXsrdSYG3
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).
Demo: https://play.tailwindcss.com/hTYuGjPHHk
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center flex-1">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6 h-full flex items-center">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
I have everything working with one of the examples found on the website but for some reason I cannot seem to get the mobile navbar to show when clicking. Can someone take a peek and tell me what I'm missing please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(#conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(#conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(#conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Dashboard
Team
Projects
Calendar
Reports
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div #click.away="open = false" class="ml-3 relative" x-data="{open: false }">
<div>
<button #click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<div class="-mr-2 flex md:hidden">
<button #click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class="{ 'block': open, 'hidden md:hidden': !open }" #click.away="open = false" x-data="{open: false}" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(#conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(#conn, :error) %></p>
<%= #inner_content %>
</div>
</main>
</div>
</html>
I am working on getting this whole example in codepen to help things out and will update with that as soon as I have it working.
I figured it out. I never registered a state for the navbar and so it didn't fire the click event. The nav tag should be as:
<nav class="bg-gray-900 x-data="{ open: false }">
I've got the mobile header working with the following code, I noticed that open doesn't get toggled on the mobile version so maybe this doesn't event need to be an Alpine.js component.
If this isn't exactly what you were looking for, feel free to leave a comment clarifying the behaviour you're after for the mobile navigation (currently I guess it just display everything on mobile breakpoints).
Note the I've gotten rid of x-show and the :class binding in favour of always applying the md:hidden class since I couldn't find where you wanted to toggle open from.
<div class="md:hidden" #click.away="open = false" x-data="{open: false}">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
Above example is viewable/editable in this CodePen.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
I want to put that avatar on the right beside “APP” on the farthest right, but I can't seem to make it work.
You can use absolute position on the image container and set right to 1rem or similar. The right attribute controls how far from the right the element should be placed. (But there are many other ways to do this)
header {
position: relative;
}
#profile {
position: absolute;
right: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
Try to use margin-left:auto; margin-right:0; on <div id="profile">
#profile{
margin-left: auto;
margin-right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>