This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed last month.
I am trying to make simple nav-bar with logo, nav-links and button. and space everything evenly
I have wrapper around those 3 items and i apply display:flex and than inside list i again apply display:flex but justify-content doesn't affect list items, they are merged together.
.nav-wrapper{
display: flex;
justify-content: space-evenly;
background: rgba(245, 253, 255, 0.8);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(14px);
}
.nav--list{
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
<div class="nav-wrapper">
<img src="./images/logo.svg" alt="" class="logo">
<nav class="nav">
<ul class="nav--list">
<li class="nav--list-item">Why Magic Massage</li>
<li class="nav--list-item">Features</li>
<li class="nav--list-item">Reviews</li>
<li class="nav--list-item">FAQ</li>
</ul>
</nav>
ORDER NOW
</div>
You can use gap. https://developer.mozilla.org/en-US/docs/Web/CSS/gap
.nav-wrapper{
display: flex;
justify-content: space-evenly;
background: rgba(245, 253, 255, 0.8);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(14px);
}
.nav--list{
display: flex;
justify-content: space-between;
gap: 20px; /* add gap */
margin: 0;
padding: 0;
list-style: none;
}
<div class="nav-wrapper">
<img src="./images/logo.svg" alt="" class="logo">
<nav class="nav">
<ul class="nav--list">
<li class="nav--list-item">Why Magic Massage</li>
<li class="nav--list-item">Features</li>
<li class="nav--list-item">Reviews</li>
<li class="nav--list-item">FAQ</li>
</ul>
</nav>
ORDER NOW
</div>
Use css gap or column-gap property in your nav--list class:
.nav-wrapper{
display: flex;
justify-content: space-evenly;
background: rgba(245, 253, 255, 0.8);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(14px);
}
.nav--list{
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
column-gap: 1.5em;
}
<div class="nav-wrapper">
<img src="./images/logo.svg" alt="" class="logo">
<nav class="nav">
<ul class="nav--list">
<li class="nav--list-item">Why Magic Massage</li>
<li class="nav--list-item">Features</li>
<li class="nav--list-item">Reviews</li>
<li class="nav--list-item">FAQ</li>
</ul>
</nav>
ORDER NOW
</div>
Related
I am desperately trying to do something like this background image https://eggramen.neocities.org/main.html but I can't achieve it. I want my video to be the size of the container and that the container is inside of the homebox. Currently I can set the width to whatever I want but I can't set the height at all. The video can't go over the other elements in the flexbox. How do I do this?
.homebox_flex{
border: 2px solid whitesmoke;
width: 800px;
height: 800px;
display: flex;
flex-direction: column;
margin: auto;
padding:10px;
align-items: center;
}
.logotext2{
font-size: 20px;
text-shadow: 4px 4px #000000;
text-align: center;
padding: 50px;
z-index: 5;
}
.columns{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
list-style: none;
}
.column {
flex: 30%;
}
.video_container{
display: absolute;
background: #7f3197;
width: 2200px;
height: 2200px;
z-index: -5;
}
.backgroundvideo2{
}
.footer2{
display: flex;
flex-direction: row;
gap: 30px;
align-items: center;
list-style: none;
z-index: 5;
}
<!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>asd</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="background2">
<div class="homebox">
<div class="homebox_flex">
<div class="logobox2">
<div class="logotext2">
<h1 class="titles" id="title3">asd</h1>
<h1 class="titles" id="title4">asd</h1>
</div>
</div>
<ul class="columns">
<div class="column">
<li>asd</li>
<li>asd</li>
<li>asd </li>
<li>asd </li>
<li>asd </li>
</div>
<div class="column">
<li>asd </li>
<li>asd </li>
<li>asd] </li>
<li>asd </li>
<li>asd </li>
</div>
<div class="column">
<li>asd</li>
<li>asd </li>
<li>asd </li>
<li>asd </li>
<li>asd </li>
<li>asd</li>
</div>
</ul>
</div>
<ul class="footer2">
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
</ul>
</div>
</div>
<div class="video_container">
<div class=""></div>
<video class="backgroundvideo2" autoplay muted loop src=""></video>
</div>
</body>
</html>
I get known that from your message. you wanted to add a video background inside the container and keep the all content above the video background. So, here is an easy, flexible & complete solution for you. Please use the HTML & CSS code:
<div class="background2">
<div class="video_container">
<div class="body_overlay"></div>
<video autoplay muted loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Winter-Grass.mp4" type="video/mp4" />
<source src="https://storage.googleapis.com/coverr-main/webm/Winter-Grass.webm" type="video/webm" />
</video>
</div>
<div class="homebox">
<div class="homebox_flex">
<div class="logobox2">
<div class="logotext2">
<h1 class="titles" id="title3">asd</h1>
</div>
</div>
<ul class="columns">
<div class="column">
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</div>
<div class="column">
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</div>
<div class="column">
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</div>
</ul>
<ul class="footer2">
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
<li class="ft2link">asd</li>
</ul>
</div>
</div>
</div>
.background2 {
z-index: 1;
height: auto;
margin: auto;
max-width: 800px;
position: relative;
border: 2px solid #000000;
}
.video_container {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
position: absolute;
background: #000000;
}
.video_container video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.video_container .body_overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
position: absolute;
background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(rgba(0, 0, 0, 0.3)));
background-image: -o-linear-gradient(bottom, #000000, rgba(0, 0, 0, 0.3));
background-image: linear-gradient(0deg, #000000, rgba(0, 0, 0, 0.3));
}
.homebox_flex {
height: 800px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 50px 30px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.titles {
color: #ffffff;
font-size: 72px;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
text-shadow: 4px 4px 0 blue;
}
.columns {
margin: 0;
padding: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.column {
-webkit-box-flex: 0;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
padding: 30px;
color: #ffffff;
text-align: center;
}
.footer2 {
gap: 30px;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #ffffff;
list-style: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
This is what it is supposed to be the search and under it the list but when I try to write something I have this problem
the list pops ower the search, could you tell me please how to solve this problem
Code:
.navigation{
position: fixed;
left: -32rem;
width: 40rem;
height: 100%;
background:linear-gradient(to top, rgb(0, 0, 0, .9),rgb(0, 0, 0, .9));
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: left .8s cubic-bezier(1, 0, 0, 1);
z-index: 4;
}
.navigation-serch{
position: relative;
top: 10rem;
}
.navigation-list{
list-style: none;
padding: 0;
height: 28rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
<nav class="navigation">
<div class="navigation-headin">
<form class="navigation-serch">
<input type="text" class="navigation-search-input" placeholder="Search">
<button name="navigation-search" class="navigation-search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<ul class="navigation-list">
<li class="navigation-item"> Home</li>
<li class="navigation-item"> About us</li>
<li class="navigation-item"> Rooms</li>
<li class="navigation-item"> Events</li>
<li class="navigation-item"> Contact</li>
</ul>
<div class="copy-right">
<p>© 2021 Sunset Lodge. All Rights Reserved.</p>
</div>
</nav>
I am not new to flex but I am not able to vertically align the content of the navbar to the center in my code.
<nav className="nav navbar">
<h3> Logo </h3>
<ul className= "nav-link1">
<li className="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li className="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li className="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>
and my CSS is:
.nav{
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
justify-content:space-between;
align-items: center;
list-style: none;
}
and I also have bootstrap imported into the project.
Any help would be appreciated !!! Thank you.
Replace class with className if using react.
.nav{
display: flex;
flex:1;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
flex-direction:row;
justify-content:space-between;
align-items: center;
list-style: none;
}
<nav class="nav">
<h3> Logo </h3>
<ul class= "nav-link1">
<li class="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li class="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li class="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>
In bootstrap, there is a padding-bottom given to the ul element.
Add margin-bottom: 0 to your .nav-link1 class and it will be aligned vertically.
I have a vertical NavBar which is in a wrapper. It works fine but the rest of my content follows below it. I'd like to have the Vert Narbar on the Left maybe 20% width, and the content on the Right. I'll need to use a Clear for my footer.
The Navbar CSS [omitting some unecessary lines] is:
div.wrapper {
margin: 60px auto auto 8px;
width: 220px;
}
p {
/*4spaces*/
font-family: georgia;
font-size: 1rem;
line-height: 25px;
margin: 24px 0;
text-align: center;
}
nav.vertical {
border-radius: 14px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
}
nav.vertical>ul {
list-style-type: none;
}
nav.vertical>ul>li {
display: block;
}
nav.vertical>ul>li>a {
background-color: rgb(157, 34, 60);
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .35s ease;
/*4spaces */
}
nav.vertical>ul>li>a:hover {
background-color: rgb(114, 51, 98);
cursor: pointer;
}
nav.vertical>ul>li>div {
background-color: rgb(255, 255, 255);
}
nav.vertical>ul>li>div>ul {
list-style-type: none;
}
nav.vertical>ul>li>div>ul>li>a {
background-color: rgb(255, 255, 255);
border-bottom: 1px solid rgba(0, 0, 0, .05);
color: #333331;
display: block;
font-size: 1.1rem;
padding: 10px 0;
text-decoration: none;
transition: all 0.35s linear;
}
nav.vertical>ul>li>div>ul>li:hover>a {
background-color: lightBlue;
color: rgb(255, 255, 255);
padding: 10px 0 10px 50px;
}
<!-- 4 spaces -->
<div class="wrapper">
<nav class="vertical">
<ul>
<li>
Category 1
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<!-- 4 spaces -->
</li>
<li>
Category 2
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- 4 spaces -->
</div>
<div style="padding-left:20px">
<h1>Website Content Stuff</h1>
</div>
<!-- main content -->
<p>Ipsorum pro loekum text that we all hate</p>
I should mention that I got the Navbar code online from Adam-Bray
You have to add a float on your .wrapper div, because it's a block element so it takes the full width and moves the content below it
I'm trying to code a responsive horizontal nav bar using flex-display (see attached pic for final project), but I can't get the vector logo sized down and to the left. Here's my code:
HTML:
<nav>
<div class="menuBar">
<ol id="navList">
<li><img id="menuLogo" src="img/fullLogo.png"></li>
<li>HOME</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>MEET US</li>
<li>BLOG</li>
<li>CONTACT</li>
</ol>
</div>
</nav>
As you can see, I've tried putting the logo (the img file) in the to try and line it up. And here's my CSS:
CSS:
nav{
width: 100%;
margin: auto;
background-color: white;
}
#navList{
display: flex;
flex-direction: row;
width: 95%;
margin: auto;
justify-content: space-between;
}
#menuLogo{
display: flex;
width: auto;
height: auto;
max-width: 150px;
}
#navList li{
list-style: none;
border-bottom: none;
}
The logo (img file) keeps pushing the last (Contact) off the right side of the page.
You can take logo out of ol and do somehing like this
.menuBar {
display: flex;
align-items: center;
justify-content: space-between;
background: white;
}
img {
width: 100px;
height: auto;
margin: 20px;
}
ol {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
li {
padding: 5px
}
<nav>
<div class="menuBar">
<img src="http://placehold.it/350x150">
<ol id="navList">
<li>HOME</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>MEET US</li>
<li>BLOG</li>
<li>CONTACT</li>
</ol>
</div>
</nav>
You can use flex:1; on the first li .
#navList {
display: flex;
flex-direction: row;
width: 95%;
margin: auto;
padding: 0;
}
#navList li:first-of-type {
flex: 1;
margin: 0
}
#navList li {
list-style: none;
border-bottom: none;
margin: 1em 1em 0;
/* eventually : */
white-space: nowrap;
}
nav {
width: 100%;
margin: auto;
background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)) bottom repeat-x;
background-size: 100% 3px;
background-color: white;
}
<nav>
<div class="menuBar">
<ol id="navList">
<li><img id="menuLogo" src="http://dummyimage.com/185x70/FF0&text=LOGO"></li>
<li>HOME</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>MEET US</li>
<li>BLOG</li>
<li>CONTACT</li>
</ol>
</div>
</nav>