plain CSS to Keep the nav on top of the page [duplicate]

plain CSS to Keep the nav on top of the page [duplicate] - javascript

This question already has answers here:
How to fix a header on scroll
(16 answers)
Closed 2 months ago.
<!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" />
<!-- To place the footer at the bottom of the page -->
<style>
html,
body {
height: 100%;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute; /* To pull the header out of the document flow */
}
main {
flex: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</div>
</body>
</html>
Let's say h1 and nav is placed within header tag and this would look like below:
What I want to achieve is keeping the nav tag on top of the page while the h1 tag is being scrolled as usual:
I've tried adding position: sticky; and top: 0;, but it doesn't seem to be working as the nav tag is placed within the header tag.
Should I be using JavaScript to achieve this? or is it possible to solve with plain CSS only?
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute; /* To pull the header out of the document flow */
left: 0;
right: 0;
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav > ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav > ul li {
margin: 0 10px;
}
nav > ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav > ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer > div a {
color: #ffffff;
text-decoration: none;
}
footer > div a:hover {
color: #683d29;
}
<!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>Document</title>
</head>
<body>
<div id="root">
<header>
<h1>Test Page</h1>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
</header>
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

Use
position: fixed;
This makes the position stay the same, no matter how far you scroll

<!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" />
<!-- To place the footer at the bottom of the page -->
<style>
html,
body {
height: 1000vh;
}
header {
min-height: 300px;
}
nav {
height: 20px;
background-color: blue;
position: sticky;
top: 0;
}
main {
height: 1000vh;
background-color: red;
}
footer {
height: 200px;
background-color: yellow;
}
</style>
<title>Document</title>
</head>
<body>
<div id="root">
<header>
<h1></h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</div>
</body>
</html>
nav elements sticks only until header is in view, but if you want it to stick for the whole page add nav styles to header.
header {
height: 20px;
background-color: blue;
position: sticky;
top: 0;
}

like this?
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
/* 👈 i made changes. */
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav>ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav>ul li {
margin: 0 10px;
}
nav>ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav>ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer>div a {
color: #ffffff;
text-decoration: none;
}
footer>div a:hover {
color: #683d29;
}
<!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>Document</title>
</head>
<body>
<div id="root">
<!-- 👇 i made changes -->
<header>
<h1>Test Page</h1>
</header>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
<!-- 👆 i made changes -->
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

you can try one thing, make position: sticky and then top:0

By moving the nav element outside the header element, the position: sticky code works.
html,
body {
height: 100%;
}
body {
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
position: absolute;
/* To pull the header out of the document flow */
left: 0;
right: 0;
}
header h1 {
text-align: center;
}
nav {
margin: 0 auto;
position: sticky;
top: 0;
}
nav>ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
nav>ul li {
margin: 0 10px;
}
nav>ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}
nav>ul li a:hover {
color: #bd8b4f;
}
main {
flex: 1;
min-height: 1500px;
}
footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}
footer>div a {
color: #ffffff;
text-decoration: none;
}
footer>div a:hover {
color: #683d29;
}
<!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>Document</title>
</head>
<body>
<div id="root">
<header>
<h1>Test Page</h1>
<!--Move nav element outside the header element but inside the #root element for position: sticky to work.-->
</header>
<nav>
<ul>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
<li>
Nav
</li>
</ul>
</nav>
<main></main>
<footer>
<div>Copyright 2022. Test All rights reserved.</div>
</footer>
</div>
</body>
</html>

Related

How do I get my nav menu to open beneath the navigation bar and not inside of it?

I'm attempting to implement a simple hamburger icon nav menu for a website I'm developing, but I'm having issues where the contents of the navigation menu are opening/appearing within the navigation menu and not below the nav bar.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</header>
<br>
</body>
</html>
CSS:
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
overflow: auto;
}
/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer{
margin: auto;
position: relative;
right: 35px;
}
.navHeader{
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
.navHeader #myLinks{
display: none;
position: relative;
top: 5px;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta{
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer{
overflow: hidden;
}
button{
padding: 9px 5px;
background-color: rgba(35,255,0,0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: yellow;
}

The issue here is that your <header> class .navHeader is using display: flex; therefore items within that element will act as flex elements. You can read more about those Here
There are a few ways you could go about this.
I think your best solution is to move the <div id="myLinks"></div> block below the header.
Then in your CSS: remove the overflow: auto from *.
Remove the class .navHeader before #myLinks, and add a few more properties to make sure the block is below your header #myLinks{top: 65px; padding: 10px; text-align: center;}
here is the full code:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<br>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
CSS
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
/* overflow: auto; */
}
/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer {
margin: auto;
position: relative;
right: 35px;
}
.navHeader {
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
#myLinks {
display: none;
position: relative;
top: 65px;
text-align: center;
padding: 10px;
width: 100%;
background: #deb887;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta {
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer {
overflow: hidden;
}
button {
padding: 9px 5px;
background-color: rgba(35, 255, 0, 0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: yellow;
}

Make nav fill out full width without breaking the website

I wanted to know how I can make a nav menu I made fill out the whole page. A simple solution I thought of was to put it on absolute position and set top, left, bottom, right to 0. However, this caused it to go over the content and made the whole page a different color. Here's my HTML/CSS:
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
I have tried every method I could think of and search of, but can't really pull it off.

If you try to make the topnav position to absolute, it is the correct way. You just must to adjust the padding or margin of the content below the topnav or set the padding top to the body so the topnav is not to go over the content.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding-top: 50px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
Or you can make the topnav width to 100vw so the topnav will fully contain the width of your device, and set the body margin and padding to 0. But i not recomend to use this because sometimes it can make your website have horizontal scrolling, so the best way is still to use the first answer.
//JS
function myFunction() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* CSS */
body {
font-family: 'Roboto', Arial, sans-serif;
background: white;
padding: 0;
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
width: 100vw;
}
.topnav #nav-links {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #b47b5a;
color: white;
}
.body {
display: flex;
margin: auto;
min-height: 300vh;
}
<!--HTML-->
<!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">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script/server.js"></script>
<title>Hello</title>
</head>
<body>
<header>
<div class="topnav">
Hello World!
<div id="nav-links">
Home
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="body">
<h1>Hello World!</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>

How to close dropdown when clicked off of dropdown menu? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);

I am trying to put my links on the right side of the screen using flex css, but its on the left side with the title

I am creating a navbar using flex CSS. My problem is that I wanted the links to be on the right side of the screen, but they are on the left side and next to the title which is what I do not want. I have tried margin-left: auto, but it does not work. Is there a different solution to this problem? The image down below:
Image of Navbar
Here's my codes:
#import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/*
font-family: 'Poppins', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
*/
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
}
nav {
padding: 20px;
display: flex;
justify-content: space-between;
position: fixed;
align-content: center;
background-color: transparent;
}
.name-title {
font-family: "Montserrat Alternates", sans-serif;
font-size: xx-large;
color: #000;
}
nav ul {
display: flex;
justify-content: space-between;
align-content: center;
margin-top: 10px;
}
nav li {
list-style: none;
}
nav a {
font-family: "Poppins", sans-serif;
font-size: medium;
padding-right: 2em;
text-decoration: none;
color: #000;
}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="name-title">Ayush Kumar</div>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>

Just add width: 100%; to Nav
nav {
padding: 20px;
display: flex;
justify-content: space-between;
position: fixed;
align-content: center;
background-color: transparent;
width: 100%;
}
or remove position fixed

position: fixed; is causing the issue. If you really want to use it, add some more details describing the position.
nav {
position: fixed;
left: 0;
right: 0;
}
The above will give it a width of 100% since the position is 0 distance from both left and right end of the viewport. Codepen
Otherwise you can remove position:fixed too.

My Solution to your Question, I hope I can help.
<style>
.main-nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navbar {
display: flex;
flex-direction: row;
list-style: none;
}
.navbar li {
padding-right: 5px;
}
</style>
<body>
<nav class="main-nav">
<h1>Name</h1>
<ul class="navbar">
<li>
link A
</li>
<li>
link B
</li>
<li>
link C
</li>
</ul>
</nav>
</body>

Try Wrapping your nav tag in a body tag in your html. You set the body width to 100% but theres no body tag in your HTML.

add class to an element by clicking and remove it to the other elements By JavaScript

I am working on a menu, and I am trying to add a class to the li when I clik on it, but I need to remove the class to the other li elements when I click on one of them, I have tried this clicked.classList.remove("active"); but doesnt work, every element I click on get the class and is not possible to remove it, How coud I do this correctly.
Thanks for your help
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
clicked.classList.remove("active");
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!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/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

I modified your js code a bit. Let's do another loop in your click event listener, to uncheck the "active" class to every menu option.
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
// modified in here
// clicked.classList.remove("active");
menu_link = document.querySelectorAll(".menu_option");
for (i = 0; i < menu_link.length; i++) {
menu_link[i].classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!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/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

I hope this is what you're looking for? if so you can tweak existing code based on this.
you can replace button with li that won't be an issue.
var btnContainer = document.getElementById("myDIV");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

I think this is what you want:
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
var active = document.querySelector('.menu_option.active');
if(active) {
active.classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!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/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

plain CSS to Keep the nav on top of the page [duplicate] - javascript

Use position: fixed; This makes the position stay the same, no matter how far you scroll

you can try one thing, make position: sticky and then top:0

Related

How do I get my nav menu to open beneath the navigation bar and not inside of it?

Make nav fill out full width without breaking the website

How to close dropdown when clicked off of dropdown menu? [duplicate]

I am trying to put my links on the right side of the screen using flex css, but its on the left side with the title

add class to an element by clicking and remove it to the other elements By JavaScript

Categories

Resources