I have managed to write some Tailwind CSS to put a logo in the top left hand corner of the screen, but now I cant seem to get a menu to render in the top right, this is what I have. Nothing I try seems to work. It just renders right next to the logo image
<div className="isolate">
<div className="px-6 pt-6 lg:px-8">
<div>
<nav
className="flex h-9 items-center justify-between"
aria-label="Global"
>
<div
className="flex lg:min-w-0 lg:flex-1"
aria-label="Global"
>
<a href="/" className="-m-1.5 p-1.5">
<span className="sr-only">This Company Name</span>
<img
className="h-8"
src="/this-company-logo.png"
alt="This Company Name"
/>
</a>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div className="isolate">
<div className="px-6 pt-6 lg:px-8">
<nav className="flex items-center justify-between" aria-label="Global">
<div className="flex-1">
<a href="/" className="-m-1.5 p-1.5">
<span className="sr-only">This Company Name</span>
<img
className="h-8"
src="/this-company-logo.png"
alt="This Company Name"
/>
</a>
</div>
<div className="flex items-center">
<ul className="flex space-x-4">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
</div>
</div>
You have to just remove this tag
...
<div
className="flex lg:min-w-0 lg:flex-1"
aria-label="Global"
>
...
</div>
...
Related
I'm trying to use SwiperJS but I have a problem with the z-index I think.
I have my menu going below the slider and I don't understand how this is happening.
I tried to put a z-index: 1000 on the menu and a z-index: 1 on the slider.
I tried to put a z-index: -1 on the slider and it works, but I lose the use of the navigation buttons...
Am I blind? I think so.
<header class="menu">
<div class="menu__logo">
<a href="/">
kappa
</a>
</div>
<div class="menu__nav">
<ul>
<li>
<a href="#">
kappa
</a>
</li>
<li>
<a href="#">
kappa
</a>
</li>
<li class="menu__nav__dropdown" x-data="{open: false}" x-on:mouseover="open = true" x-on:mouseover.away="open = false">
<span>
kappa
</span>
<x-icons.array-down />
<div class="menu__nav__dropdown__block" x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" #click.away="open = false" style="display: none;">
<div class="menu__nav__dropdown__block__bg">
<div class="menu__nav__dropdown__link__wrapper">
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">
kappa
</a>
</li>
</ul>
</div>
<div class="menu__phone">
<div class="menu__phone-icon">
<x-icons.phone />
</div>
<div class="menu__phone-number">
kappa
</div>
</div>
</header>
.menu {
#apply flex w-full justify-between py-4 sticky base;
}
.menu__logo {
#apply w-52;
}
.menu__nav ul {
#apply list-none flex gap-x-10;
}
.menu__nav {
#apply my-auto;
}
.menu__phone {
#apply flex gap-x-3;
}
.menu__phone-icon {
#apply bg-sc-orange p-2 fill-white;
}
.menu__phone-number {
#apply my-auto font-bold;
}
.menu__nav__dropdown {
#apply cursor-pointer fill-primary flex gap-x-3
}
.menu__nav__dropdown svg {
#apply my-auto
}
.menu__nav__dropdown__block {
#apply absolute left-1/2 transform -translate-x-1/2 mt-8 px-2 w-screen max-w-xs sm:px-0 z-10;
}
.menu__nav__dropdown__block__bg {
#apply shadow-lg ring-1 ring-black ring-opacity-5 z-10;
}
.menu__nav__dropdown__link__wrapper {
#apply relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8;
}
.menu__nav__dropdown__link {
#apply -m-3 p-3 block hover:bg-gray-50;
}
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I would just like the menu to go in front of the slider.
Since your codes are complex, I will explain this with a simple example. I think the problem is that you haven't given the relative class to the field you want to stand out. If you are using z-index, you should also add the relative class. In the example below, you can see that if you remove the relative class from the title, the title will go to the back.If this is not enough, you should add that it is important to the classes. SwiperJS might be squashing your classes somehow.
Demo
I found the solution, I simply added the tailwind classes to the header : z-20 relative
I'm trying to create a header with the Title in the center, the logout button at the right, and a horizontal list menu at the bottom.
I'm using Tailwind CSS for styling, but the list won't become horizontal no matter what I throw at it.
import React from 'react'
function Header(props) {
return (
<section className="text-black bg-white">
{/* MAIN TEXT AND USER LOGIN/LOGOUT */}
<div className="flex items-center justify-center p-6">
<h1 className="text-6xl px-3 rounded-md shadow-lg py-1 bg-lmgray">
NEW STREET JOURNAL
</h1>
<div className="absolute right-20 mt-2 px-5 rounded-md shadow-lg py-1 bg-lmgray" >
<p>{props.name}</p>
<button className="border-2 border-solid border-black rounded-md ">Logout</button>
</div>
</div>
{/* NAVBAR */}
<div className="">
<ul>
<li>
Home
</li>
<li>
World
</li>
<li>
India
</li>
<li>
Politics
</li>
<li>
Economy
</li>
<li>
Markets
</li>
<li>
Opinion
</li>
<li>
Real Estate
</li>
</ul>
</div>
</section>
)
}
Header.defaultProps={
title: 'News Feed'
}
export default Header
Where am I going wrong?
Try applying inline display to all the list items, for example:
<li className="inline">
Home
</li>
Alternatively, you can use divs instead of unordered lists, and use flexbox in the parent div as such:
<div className="flex">
<div>
Home
</div>
<div>
World
</div>
<div>
India
</div>
<div>
Politics
</div>
<div>
Economy
</div>
<div>
Markets
</div>
<div>
Opinion
</div>
<div>
Real Estate
</div>
</div>
The second method might be better as it allows you to control the styling from one parent div rather than having to change it for each child.
I am using Flex in tailwind in one my main div container to align the items inside of it horizontal
but somehow the items are of different sizes in the row the image link is below any fixes for it?
i have tried using height utility class but it just messes up the entire page.
[1]: https://i.stack.imgur.com/Yjs51.jpg
HOME
ORDERS
MENU CARD
FAQs
ABOUT
Butter Chicken
If you haven't tried butter chicken, you don't know what you'r missing.
</div>
</div>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (1).jpg" alt="malai-chicken">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Malai Chicken</div>
<div>
<p class=" font-serif text-base mb-3">Clean as white and appetizing.</p>
</div>
</div>
</div>
</a>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (2).jpg" alt="Shahi Paneer">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Shahi Paneer</div>
<div>
<p class=" font-serif text-base mb-3">First Pick of Royales.</p>
</div>
</div>
</div>
</a>
</div>
I have developed a site on angular. All things are working fine. Now I want to adjust the footer.
Actual Footer
Expected Footer
Code
<footer>
<div class="row">
<div class="col-12">
<img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
</div>
<div class="col-md-3 col-12">
<p>
<b>Manufactured by:</b>
</p>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="nav-menu">
<li>
<a [routerLink]="['/']">Home</a>
</li>
<li>
About us
</li>
<li>
Faqs
</li>
<li>
<a [routerLink]="['/latest-recipes']">recipes</a>
</li>
<li>
<a [routerLink]="['/stores']">Stores</a>
</li>
<!-- <li>
<a [routerLink]="['/where-to-buy']">where to buy</a>
</li> -->
</ul>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="px-0">
<li>Privacy & Policy</li>
<li>Terms & Condition</li>
</ul>
</div>
<div class="col-md-3 col-12">
<h1>Karachi Office</h1>
<p></p>
<h1>Lahore Office</h1>
<p></p>
<div class="social-icon d-flex align-items-center">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="col-md-2 col-12">
<img src="../../assets/img/ebs.png" class="img-fluif" />
</div>
</div>
</footer>
How can I align the footer? Any help would be highly appreciated.
You've made the image col-12 which will make the image spread across the full container. Remember that in bootstrap each container is split into 12, so saying that the image covers col-12 will cover all of them. From the looks of it you want to try around col-2.
Alternatively you could achieve the same without Bootstrap. Put the logo/manufactured by links in one div and float them left. Place the rest of the content in another div and float them right.
Add and Remover mt-3(margin-top) from the div.
I have a pricing plan page that I am trying to add a toggle switch to. I can't seem to figure out the proper way to vertically align the text of it: here is my fiddle
I've tried to set the margin and the padding but the Monthly and Annual are always at the top.
<div class="background">
<div class="container">
<div class="toggle-btn" style="background-color:transparent;text-align:center;position:relative;z-index:99;vertical-align:top;">
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Monthly</span>
<label class="switch" style="margin-bottom:15px;">
<input type="checkbox" id="checbox" onclick="check()" />
<span class="slider round"></span>
</label>
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Annual </span>
</div>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</div>
</div>
Remove the margin-bottom from that switch element and add display:flex;justify-content:center;align-items:center; to .toggle-btn
Here's the edited fiddle: https://jsfiddle.net/bjd3wps1/
you just had to add position: relative to the spans containing the text and than update the bottom value to bottom: -5px
here's the updated fiddle: https://jsfiddle.net/a2nwet54/