Hey guys I'm not sure what I'm doing wrong, but I want the 3rd li item (input) to go to the end of the container, when I use the justify-content: space-between; - nothing happens, I've tried aligning them, but still nothing.
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
}
.navContact {
margin-left: auto;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mainNav {
display: flex;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
You can set flex: 1 in the ul and the last item of the ul, then set margin-left: auto in the last li inside ul as well
*,
*::after,
*::before {
box-sizing: border-box
}
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
display: flex;
justify-content: space-between;
}
.mainNav {
display: flex;
flex: 1;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
.navitem:last-of-type {
margin-left: auto
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
Related
My navbar is too small i wanna make it bigger. i dont know how can ı resize it or how can ı change navbar size i tried to change width and height but didnt work. there are my html&css codes below. any help appricated.
#navbar{
color: #ffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.75rem;
height: 70px;
}
#navbar ul{
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding: 0.7rem;
}
#navbar ul li a:hover {
background: rgb(226, 109, 128);
border-radius: 5px;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.bg-dark-blue{
background: rgb(216, 152, 163);
}
<header class="bg-dark-blue">
<div class="container">
<nav id="navbar">
<h1 class="heading-small"> Buse Nur Çetin</h1>
<ul>
<li> Ana Sayfa</li>
<li>Hakkımda</li>
<li>Projelerim</li>
<li>Fotogaleri</li>
<li>İletişim</li>
</ul>
</nav>
</div>
</header>
I don't see any problem in your CSS. You can set the height of your navbar in the styles for #navbar. This is the code snippet with your styles:
#navbar {
color: #ffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.75rem;
height: 70px;
}
#navbar ul {
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding: 0.7rem;
}
#navbar ul li a:hover {
background: rgb(226, 109, 128);
border-radius: 5px;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
.bg-dark-blue {
background: rgb(216, 152, 163);
}
<header class="bg-dark-blue">
<div class="container">
<nav id="navbar">
<h1 class="heading-small"> Buse Nur Çetin</h1>
<ul>
<li> Ana Sayfa</li>
<li>Hakkımda</li>
<li>Projelerim</li>
<li>Fotogaleri</li>
<li>İletişim</li>
</ul>
</nav>
</div>
</header>
And this is the same snippet with different height for #navbar:
#navbar{
color: #ffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.75rem;
height: 120px;
}
#navbar ul{
list-style-type: none;
display: flex;
align-items: center;
}
#navbar ul li a {
padding: 0.7rem;
}
#navbar ul li a:hover {
background: rgb(226, 109, 128);
border-radius: 5px;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.bg-dark-blue{
background: rgb(216, 152, 163);
}
<header class="bg-dark-blue">
<div class="container">
<nav id="navbar">
<h1 class="heading-small"> Buse Nur Çetin</h1>
<ul>
<li> Ana Sayfa</li>
<li>Hakkımda</li>
<li>Projelerim</li>
<li>Fotogaleri</li>
<li>İletişim</li>
</ul>
</nav>
</div>
</header>
My dropdown effect is not working what am I doing wrong. I have tried by putting display to none and using the :hover but nothing works.
As soon as I hover over the Menu, .drp-btn:hover .menu-content-container doesn't work.
<div class="nav-container">
<div class="drp-btn"> Menu </div>
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
</ul>
</div>
</div>
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
wrap the code drp-btn div
You need to wrap your menu-content-container into the drp-btn div to make that work:
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I was making a navbar using flexbox. By default, shouldn't the justify-content property be set to flex-start; ? But the content inside my container is not begining from the start.
Here's the output and code:
html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}
<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>
That white-space is caused by the default padding of the <ul>. You can remove it by adding: ul { padding-left: 0; }
html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
padding-left: 0;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}
<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>
I am new to CSS and I was trying to create a very basic navigation bar.
My HTML and CSS are given below.
The problem is when I hover over my FEATURES tab nothing happens even though I have changed the feature-menu displays to flex from none upon hovering.
I am not able to find any mistake in my code. Could anyone please tell where I have gone wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown span:hover .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
left: 990px;
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Let's review your HTML structure.
Here's the relevant part:
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
.
.
.
Here's the CSS selector you're applying:
.dropdown span:hover .features-menu
So the problem is clear.
You're going from one level (.dropdown), down a level (to the span), then back up a level (to the .features-menu).
You're trying to target the .features-menu from an element positioned lower in the HTML structure. CSS doesn't work that way.
CSS can only target downward or forward. It cannot target upward or backward.
These concepts are explained in detail in these posts:
Is there a CSS parent selector?
Is there a "previous sibling" CSS selector?
You can make your hovering work by targeting "forward" (using your original – malformed – HTML), using sibling combinators (+ or ~).
.dropdown:hover + .features-menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover + .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Or, you can make your hovering behavior work by targeting "downward" (using correctly formed HTML), using descendant selectors (> or [space]).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover > .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
</li><!-- closing tag goes here -->
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
I want the dropdown flex to be like this
This is what I found on internet, it uses simple dropdown menu.
I want the dropdown menu using flexbox and its properties. The problem is that the number of elements in a column is dynamic but flexbox container do not change its height according to it.
This is what I get
The code
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
The problem is, that you accidently target the drop down menu as well and thus restrict it to 50px as well. You can fix this, by changing the selector from
nav ul {
/* this affects all ul elements inside the nav, the first level
.left as well as the .drop-menu */
}
to the following:
nav > ul { /* <- this affects only the direct descendant (ul.left) */ }
Alternatively you could change the height declaration to min-height.
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
nav > ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
If I'm understanding the end goal, you want to change nav ul { height: 50px; } to min-height: 50px
* {
font-family: sans-serif;
}
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
background-color: #cbcbcb;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border-bottom-width: 1px;
border-bottom-color: black;
}
nav ul {
min-height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
li > ul.drop-menu {
display: none;
}
li:hover > ul.drop-menu {
position: absolute;
top: 100%;
background-color: white;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding-left: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.drop-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.drop-col > ul {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 0;
}
.drop-header {
font-size: 18px;
font-family: sans-serif;
color: #ff3546;
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<script src="live.js"></script>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<div class="drop-col">
<ul>
<li class="drop-header">Airforce</li>
<li>Flying fox</li>
<li>Bungee Jumping</li>
<li>Paragliding</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Army</li>
<li>Skiing</li>
<li>Mountaineering</li>
<li>Trekking</li>
<li>Rock Climbing</li>
</ul>
</div>
<div class="drop-col">
<ul>
<li class="drop-header">Navy</li>
<li>River Rafting</li>
<li>Parasailing</li>
<li>Scuba Diving</li>
<li>Swimming</li>
<li>Kayaking</li>
<li>Surfing</li>
</ul>
</div>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>