This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 4 years ago.
I am trying to get my both ULs align in center vertically(Cross axis). I was doing it in Sass and I may have gotten confuse because there was so much nesting. I am talking about ul that are direct child of nav i.e. "nav-main-list" and "nav-social-list".
This is my HTML code:
* {
margin: 0;
padding: 0;
}
body {
background: #f3c6c6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
nav {
background-color: #d42e2e;
height: 3rem;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: center;
color: whitesmoke;
}
nav ul {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
margin: 0 2rem;
}
nav ul li {
height: 100%;
margin: 0;
margin-top: auto;
padding: 0 0.5rem;
}
nav ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li:hover ul {
margin: 1rem 0;
width: 100%;
display: flex;
flex-direction: column;
}
nav ul li:hover ul li {
width: 100%;
background: #d42e2e;
color: whitesmoke;
}
nav ul li:hover ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li ul {
display: none;
}
nav .nav-main-list {
text-transform: uppercase;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
}
nav .nav-social-list {
justify-content: flex-end;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
align-content: center;
align-items: center;
}
<body>
<nav>
<ul class="nav-main-list">
<li>Home</li>
<li>Languages
<ul class="lang-list">
<li>html</li>
<li>css</li>
<li>sass</li>
<li>php</li>
<li>jquery</li>
</ul>
</li>
<li>Frameworks
<ul class="frame-list">
<li>Bootstrap</li>
<li>Laravel</li>
<li>Angular</li>
</ul>
</li>
<li>Tools
<ul class="tools-list">
<li class="a" href="#">Git</li>
<li class="a" href="#">Photoshop</li>
<li class="a" href="#">Github</li>
</ul>
</li>
</ul>
<ul class="nav-social-list">
<li>Fb</li>
<li>Twitter</li>
<li>Git</li>
<li>Codepen</li>
</ul>
</nav>
</body>
The problem is that both ul are on top and not in the center of navbar. I might do it correctly by re-coding from scratch but I want to find error or reason why it's not working.
Thank You and have a Nice Day!!!
I think the issue you are seeing is to do with the padding & margins. I made a few tweaks to those, not sure if it's an improvement.
* {
margin: 0;
padding: 0;
}
body {
background: #f3c6c6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
nav {
background-color: #d42e2e;
height: 2.5rem;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: center;
color: whitesmoke;
}
nav ul {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
margin: 0 2rem;
vertical-align: middle;
}
nav ul li {
height: 100%;
margin: 0;
margin-top: auto;
padding: 0.25rem 0.5rem;
}
nav ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li:hover ul {
margin: 0.5rem 0 0.25rem 0;
width: 100%;
display: flex;
flex-direction: column;
}
nav ul li:hover ul li {
width: 100%;
background: #d42e2e;
color: whitesmoke;
}
nav ul li:hover ul li:hover {
color: #d42e2e;
background: whitesmoke;
}
nav ul li ul {
display: none;
}
nav .nav-main-list {
text-transform: uppercase;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
}
nav .nav-social-list {
justify-content: flex-end;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
align-content: center;
align-items: center;
}
<body>
<nav>
<ul class="nav-main-list">
<li>Home</li>
<li>Languages
<ul class="lang-list">
<li>html</li>
<li>css</li>
<li>sass</li>
<li>php</li>
<li>jquery</li>
</ul>
</li>
<li>Frameworks
<ul class="frame-list">
<li>Bootstrap</li>
<li>Laravel</li>
<li>Angular</li>
</ul>
</li>
<li>Tools
<ul class="tools-list">
<li class="a" href="#">Git</li>
<li class="a" href="#">Photoshop</li>
<li class="a" href="#">Github</li>
</ul>
</li>
</ul>
<ul class="nav-social-list">
<li>Fb</li>
<li>Twitter</li>
<li>Git</li>
<li>Codepen</li>
</ul>
</nav>
(See this great article from CSS Tricks for a complete guide to using flex.)
Related
This is my html code, and the lower one is css code. I really need help :(
:hover class does not work at all. Did I code something wrong?
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
#Homesub {
display: none;
}
#Home:hover #Homesub {
display: list-item;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>Members</li>
</ul>
</li>
</ul>
</nav>
You are targeting the anchor, not the li
Seems like you should be targeting the ul.
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
li > ul {
display: none;
}
li:hover > ul {
display: block;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>Members</li>
</ul>
</li>
</ul>
</nav>
* {
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
nav {
width: auto;
display: flex;
justify-content: center;
}
nav > ul > li {
background-color: #ddd;
padding: 10px 20px;
text-transform: uppercase;
position: relative;
}
nav > ul > li > a + ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: rgb(243 243 243);
width: 100%;
text-align: center;
padding: 10px;
}
nav > ul > li:hover > a + ul {
display: initial;
}
<nav>
<ul class="nav_bar">
<li>
Home
<ul class="sub">
<li>
Members
</li>
</ul>
</li>
</ul>
</nav>
I want to make my links hover only the available 50px (height: 50px), that are in my header but they are taking more space, what am I doing wrong?
/ Image /
Setting padding to 14px in #main-nav ul li a isn't a solution for me. It becomes the exact opposite with less content inside the link.
My HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<header id="main-header">
<nav id="main-nav">
<img src="img/logo.png" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
}
#main-nav ul li {
}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
Because you have a set fixed on the outer parent, You need to let that height propagate down to the <a> then center the text within it vertically.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
height:100%;
}
#main-nav ul li {}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
/* Solution */
/* sinde the li is a flex item it will automatically take the height of it's parent */
#main-nav ul li a {
/* no need for top and bottom padding anymore */
padding: 0 15px;
height: 100%;
/* To center the text vertically with respect to the height */
display: flex;
align-items: center;
}
<header id="main-header">
<nav id="main-nav">
<img src="https://picsum.photos/50" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
I am designing a hotel website with a fixed navbar. I am having trouble getting the items to be inline with an image item. It's getting quite frustrating.
Here's my HTML
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
and here's my CSS
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
My code is super basic, so work with me here.
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255, 255, 255, .55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home">
<a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img>
</a>
</li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
Live Example I made: https://akainth015.github.io/Inked-Out
Often, you can align things with vertical-align(CSS). However, it is a little counter-intuitive. When you use the vertical-align style, the element it is applied to becomes the standard for the rest of the elements. So, if you have this structure:
li {
display: inline-block;
}
ul {
list-style-type: none;
}
li img {
vertical-align: middle;
}
<ul>
<li>Home</li>
<li><img src="https://placehold.it/64x64"></li>
<li>About</li>
</ul>
Notice how it is applied to the image, not the the text you want in the center. Good luck!
So I've just learnt flexbox, however even after stating justify-content: flex-start; the list is not aligned to the left side of the column like so:
Image of the problem
Essentially I would like to align the list to the left side of the #navigation container so that there is not space present like in the image above. Any ideas what to change?
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li>
<img src="images/home_button.png" alt="An icon representing a house." id="home_button">
</li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</a></li>
</ul>
</div>
Add padding: 0; to your ul (= .navflex) to avoid the default list padding. And if that isn't close enough to the left, also add padding-left: 0 to the li elements:
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
padding: 0;
}
.navflex li {
padding-left: 0;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li><img src="images/home_button.png" alt="An icon representing a house." id="home_button"></li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</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>