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>
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;
}
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 am trying to display these images horizontally in a flex box with justify-content: space-around.
It does not work, any ideas?
The only way that I was able to display it in a spaced manner was with padding.
Why doesn't justify-content work?
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>
Flex items will take the width of their content, leaving no extra space for keyword alignment properties (such as justify-content) to work.
Create some extra space; add width: 100%. (Also, close your img elements.)
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
.trusting-companies-container {
width: 100%; /* new */
display: flex;
justify-content: space-around;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday"></li>
<li class="company-item"><img src="./images/intel.svg" alt="intel"></li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson"></li>
<li class="company-item"><img src="./images/handy.svg" alt="handy"></li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport"></li>
</ul>
</div>
.companies-evenly {
justify-content: space-evenly;
}
.trusting {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
<div class="trusted-by-container">
<div class=title>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting companies-evenly">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>
I just noticed that having justify-content: space-evenly; spaces items from the middle, so items that are longer than another, create an uneven space between the items.
I tried space-around, which I assumed should solve it, but same issue.
nav {
position: sticky;
position: -webkit-sticky;
top: 0;
text-align: center;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}
.nav {
position: sticky;
left: 0;
border-radius: 0px;
border: none;
margin-right: 10%;
margin-left: 10%;
width: 80%;
text-align: center;
padding: 0;
flex-direction: row;
display: flex;
align-items: center;
align-content: center;
justify-content: space-evenly;
cursor: default;
}
#media screen and (max-width: 1000px) {
.nav {
position: sticky;
left: 0;
border-radius: 0px;
border: none;
margin: auto;
width: 100%;
text-align: center;
padding: 0;
flex-direction: row;
display: flex;
align-items: center;
align-content: center;
justify-content: space-evenly;
}
}
<nav>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark.png" alt="Home" />
</a>
</li>
<li class="item" style="color:#4D4D4D;">Printing
</li>
<li class="item">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I'm trying to get the items to have an even gap between them, regardless of length of item
This should solve it
justify-content:space-between;
I'm trying to use flexbox within a bootstrap grid to make a thin menu with items vertically centered but it isn't working. I've attempted to use the styles presented in this demo, but apparently i've still got something incorrect.
Markup
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>
SCSS
.secondary-header {
height: 60px;
background-color: #2bf;
}
.secondary-nav {
&__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
&__nav {
height: 60px;
display: flex;
}
&__list-items {
list-style-type: none;
}
&__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
// height: 60px;
}
&__list-item {
display: inline;
color: #fff;
}
}
The problem is .secondary-nav__list-items is your flex-parent, but it's height doesn't consume the height of .secondary-header which has the blue background, and is where you want the items within .secondary-nav__list-items to be centered.
You could either make sure everything between .secondary-header and .secondary-nav__list-items has height 100%, so that .secondary-nav__list-items will be as tall as .secondary-header, or just move the height/background to .secondary-nav__list-items instead.
.secondary-nav__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.secondary-nav__nav {
height: 60px;
display: flex;
}
.secondary-nav__list-items {
list-style-type: none;
height: 60px;
background-color: #2bf;
}
.secondary-nav__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.secondary-nav__list-item {
display: inline;
color: #fff;
}
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>