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;
}

Collapsable Nav Bar using just JavaScript

I am trying to build a mobile view navigation bar that closes after clicking on a list item and I'm having trouble finding a solution. The requirements state not to use jQuery or CSS. Although, CSS solutions are also helpful. The aim is to have the list items navigate the user to a section on the page with the appropriate id. It works as it should but I want the mobile view nav bar to close after clicking a list item. Here is my code so far:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: rgb(204, 194, 194);
color: #2a324b;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Palesa Mapeka</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>
Ideas on how to solve my dilemma are appreciated. I want to learn how to do this using JavaScript.

Why not just add the same click listener to the navbar-links class?
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: rgb(204, 194, 194);
color: #2a324b;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Palesa Mapeka</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>

I think we should to try this
<button type="button"
onclick="document.getElementByClassName('navbar').style.display = 'none'">
Hide Navbar</button>
It will hide any element with navbar className
Thank you

How to make a navbar neatly open and close with javascript?

I'd like to make a good navbar with the following functionality, but I can't seem to figure it out in javascript.
I'd like it to have the following functionality:
Menu opens when a hamburger icon is clicked
Menu closes when the hamburger icon is clicked again
Menu is also closed if a link in the menu is clicked
Menu is also closed if anywhere outside of the menu is clicked
I've already added a (.active for my css menu class which can toggle whether or not the menu is displayed.) Now I originally did an onclick function, but while not only was it not good practice, it also did not give the UX I would like. This is because the only way the menu would appear or disappear was if the hamburger menu was pressed.
Here's some basic html and css that follows similarly to what I am working with:
Here's a JSFiddle: https://jsfiddle.net/L0vr8j59/
(Note: the hamburger icon only appears at screen width 800px or less via a media query)
HTML:
<nav class="navbar">
<div class="nav-list">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<div id="hamburger" class="hamburgermenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
scroll-behavior: smooth;
}
li{
font-size: 2.75rem;
}
li a:hover{
text-decoration: overline;
}
.hamburgermenu{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hamburgermenu span{
display: flex;
justify-content: center;
align-items: center;
height: 4px;
width: 40px;
margin: 4px;
background: black;
}
ul{
display: flex;
justify-content: space-around;
list-style-type: none;
}
ul a{
text-decoration: none;
font-size: 1.5rem;
color: black;
}
.navbar{
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.navbar::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(5px);
z-index: -10;
color: white;
}
.navbar.active{
background-color: black;
color: white;
z-index: 20;
}
.navbar.active::before{
box-shadow: none;
}
.navbar.active ul a {
color: white;
}
.navbar.active .hamburgermenu span{
background-color: white;
}
.nav-list{
display: block;
padding-left: 50%;
line-height: 5rem;
padding-bottom: 5px;
}
#media screen and (max-width: 800px) {
.nav-list{
display: flex;
flex-direction: column-reverse;
}
#menu{
display: none;
opacity: 0;
}
#menu.active{
position: relative;
display: flex;
top: 5px;
background-color: rgb(61, 60, 60);
flex-direction: column;
align-items: center;
opacity: 1;
transition: 5ms ease-in;
}
ul a{
color: white;
}
.hamburgermenu{
display: flex;
visibility: visible;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
align-items: flex-end;
padding-right: 2rem;
}
I can also provide any additional info if needed.
Thanks in advance. :D

Responsive center navbar

My goal is to make a navbar which is centered in the web page and responsive like here on stack.
So far I managed with some research and tutorials make a navbar which is responsive but it spreads to the end of corners.
I tried to wrap it in a container like I do with content but it limited whole navbar to middle.
Then tried to add margin to left and right but when I got on smaller screens it became ugly.
So I want your opinions how to fix it or if there is some other preferred way to do navbars.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>

Wrap the entire thing in a header, set max-width: 800px; margin: 0 auto; on the nav and move the background-color to header:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
margin: 0 auto;
max-width: 800px;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<header>
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
margin: 0 auto centers the nav and max-width caps how wide it can be. If you want it to be wider just change this property.

As per your comment:
"I want what I have now, but with a change that when its on big screen that "logo" and links are on center like for example here on stackoverflow. When I did that with padding or container it messed with smaller screens view. – Angelll"
What I understood is you need everything center in bigger screen.
Correct me If I am wrong.
As per my understanding I have found the solution and added in the below code snippet.
I have replaced the .navbar class justify-content property to center.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: center;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>

Hamburger menu - why is my code not working?

I'm trying to do a simple hamburger menu using jQuery or JS (I'm easy either way) but my code simply won't work and I can't for the life of me work out why.
It's structured as hamburger top left, logo in the middle then a profile and basket top right.
At the moment all I'm trying to do is literally get the nav list to appear on click and then I can style it however. I'm trying to do this using the .hidden class to display the nav as block when the burger is clicked.
Here's the code:
HTML:
<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x"></i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
Holidays
</li>
<li>
Sign In / Register
</li>
</ul>
</div>
</div>
</section>
CSS:
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
.hidden {
display: block;
}
#burger {
cursor: pointer;
}
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("burger").click(function() {
$("nav").toggleClass("hidden");
});
</script>
Any help would be really appreciated. Thank you.

There's at least three issues in your code:
$('burger') needs to be $('#burger') to include the id selector prefix
Similarly, $('nav') needs to be $('#nav')
.hidden in your CSS needs to be #nav.hidden so that it's specific enough to override the default style. I'd also suggest changing it to .visible to match its purpose, but that's purely a semantics issue.
The other possible issue is that you may need to add a document.ready event handler to your JS logic, depending on where you've placed it in the page. This will ensure the jQuery code executes after the DOM has been fully loaded.
jQuery(function($) {
$("#burger").click(function() {
$("#nav").toggleClass("hidden");
});
});
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
#nav.hidden {
display: block;
}
#burger {
cursor: pointer;
}
<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x">Burger</i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
Holidays
</li>
<li>
Sign In / Register
</li>
</ul>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>