We Keep Coding

How can I position my autocomplete box under the search box?

Hello I'm trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.
.header ul {
list-style-type: none;
overflow: hidden;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
top: 50px;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
input{
border-radius: 10px;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
You can see in css "suggesetionbox" the top property is targeting complete page not parent div.
Can someone suggest how can I append the div correctly under search box.
Thanks

EDIT: First, add position: relative to your .SearchContainer. This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.
Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul
.header ul {
list-style-type: none;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
align-items: center;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
position: relative;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>

.SearchContainer {
position: relative;
...
}

.suggesetionbox {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
height: 100%;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.SearchContainer {
position: relative;
display: inline-block;
}

Text inside the burger menu not animating

I made a burger menu in a website, but when I click on burger icon the background animates, but the text doesn't animate. I don't know where I went wrong, so kindly help me to fix this problem
Thank you!
This is HTML code
<nav class="navig h-nav-resp">
<img src="Images/logo.jpg" alt="MyWeb" class="logo">
<ul class="navul v-class-resp">
<li class="navc">Home</li>
<li class="navc">About</li>
<li class="navc">Pricing</li>
<li class="navc">Contact Us</li>
<li class="navc">Privacy Policy</li>
<li class="navc">Terms And Conditions</li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
This is CSS code
.navig{
display: flex;
align-items: center;
}
.navul{
display: flex;
}
.navc{
list-style: none;
padding: 8px;
margin: 5px;
}
.navc a{
text-decoration: none;
color: white;
font-size: 18px;
font-family: 'Inter', sans-serif;
}
.navc a:hover{
color: rgb(209, 209, 209);
}
.burger{
width: 33px;
height: 33px;
display: none;
position: absolute;
cursor: pointer;
right: 10%;
top: 15px;
}
.line{
background-color: white;
width: 33px;
height: 4px;
margin: 5px 5px;
}
CSS in mobile
.navul {
flex-direction: column;
}
.header {
justify-content: center;
align-items: center;
}
.navig {
height: 287px;
flex-direction: column;
transition: all 0.3s ease-out;
}
.burger {
display: block;
}
.menu {
width: 70px;
height: 30px;
}
.h-nav-resp {
height: 54px;
}
.v-class-resp {
display: none;
}
This is javascript code
burger = document.querySelector('.burger');
navig = document.querySelector('.navig');
navul = document.querySelector('.navul');
burger.addEventListener('click', ()=>{
navul.classList.toggle('v-class-resp');
navig.classList.toggle('h-nav-resp');
});
I expect both background and text to animate

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

How to make an element not fixed?

Im currently working on header and I made a hamburger slide using javascript. The problem is when the bar slides to right , the title <h2> stays in his place. I hope there is a way to make it slide with the bar.
function show() {
document.getElementById('sidebar').classList.toggle("active");
}
header {
background: #ff5f88e6;
padding: 25px;
overflow: hidden;
}
header h2 {
margin-top: 0px;
color: #fff;
text-align: center;
}
#sidebar {
position: absolute;
height: 100%;
width: 250px;
padding: 24px 20px;
left: -300px;
top: 0
}
.toggle-btn {
left: 340px;
top: 15px;
position: absolute;
}
.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 8px;
}
#sidebar.active {
left: 0;
transition-duration: 500ms;
}
#sidebar ul li {
padding: 20px 24px;
font-size: 25px;
border-radius: 50px;
}
<header>
<div id="sidebar">
<div class="toggle-btn" onclick="show()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu">
<ul>
<li>Category</li>
<li>Discusion</li>
<li>Quotes</li>
<li>Add Review</li>
</ul>
</div>
<h2>"A Book can change the way you look"</h2>
</header>
</div>
that's what's before clicking on the hamburger
what happens after
I want the title to slide right so the user can read it

An easy option is to add a class to the header element as well when you move the menu to move the h2 element as well.
Edit: I removed the active class from the sidebar and just created a css selector to change the menu based on the parent active class. This selector #header.active #sidebar
function show() {
document.getElementById('header').classList.toggle("active");
}
header {
background: #ff5f88e6;
padding: 10px;
overflow: hidden;
display:flex;
justify-content:center;
align-items: center;
}
#header.active h2{
margin-left: 300px;
}
header h2 {
transition: 500ms all;
margin: 0;
padding: 0;
color: #fff;
text-align: center;
}
#sidebar {
position: absolute;
height: 100%;
width: 250px;
padding: 24px 20px;
left: -300px;
top: 0;
transition: 500ms all;
}
.toggle-btn {
left: 340px;
top: 10px;
position: absolute;
}
.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 8px;
}
#header.active #sidebar {
left: 0;
}
#sidebar ul li {
padding: 20px 24px;
font-size: 25px;
border-radius: 50px;
}
<header id="header">
<div id="sidebar">
<div class="toggle-btn" onclick="show()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu">
<ul>
<li>Category</li>
<li>Discusion</li>
<li>Quotes</li>
<li>Add Review</li>
</ul>
</div>
</div>
<h2>"A Book can change the way you look"</h2>
</header>

Rotate div without rotating inner section

I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>

you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>

Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>