body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<img src="" class="logo">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
I want to add a hover effect to the ul li but the code seems not to work.
I think this is how it should be but the css seems not to work for some reason. Thanks anyways
I also tried using the opacity tag but it still doesn't work.
Edit: I have now edit the HTML Code. The problem is that the hover effect doen't appear.
What I want is to make a hover effect for the ul li.
I think that you have to put the text inside the a tags
body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
transition-duration: 300ms;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
Related
I'm trying to make a nav bar I found on CodePen, but the problem is it doesn't have a dropdown menu. I know how to make a dropdown menu, but don't know how to position and style it as of now. I'm still fairly new to CSS.
Any help is very much appreciated, thank you!
If the code is not responsive, here's the original.
https://codepen.io/WebDevSimplified/pen/LqKQRK
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></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> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: 100px;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.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;
}
}
I guess you want nested dropdown in navigation link. Also you can use bootstrap navbar or w3school navbar.
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #fff;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #2581dc;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
</article>
Accordingly to your reply to my comment I have added some code to yours.
So please check the code from https://codepen.io/13rpsingh/pen/poajyXK
window.addEventListener("load", ()=>{
let toggleButton = document.querySelector(".toggle-button");
let navbarLinks = document.querySelector(".navbar-links");
toggleButton.addEventListener('click', (e)=>{
if(navbarLinks.classList.contains("active")){
navbarLinks.classList.remove("active")
toggleButton.classList.remove("active")
}else{
navbarLinks.classList.add("active")
toggleButton.classList.add("active")
}
})
let menuDropDown = document.querySelector(".navbar-links ul li ul");
let dropDownTrigger = document.querySelector("#dropdown-trigger");
if(dropDownTrigger){
dropDownTrigger.addEventListener('click', (e) =>{
if(menuDropDown.style.display == "flex"){
menuDropDown.style.display = "none";
}else{
menuDropDown.style.display = "flex";
}
})
}
})
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: max-content;
max-width:100%;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.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;
}
.toggle-button .bar{
position: absolute;
transition: all .3s ease-in-out;
}
.toggle-button .bar:nth-of-type(1){
top: 0;
}
.toggle-button .bar:nth-of-type(2){
top: 50%;
transform : translateY(-50%);
}
.toggle-button .bar:nth-of-type(3){
bottom: 0;
}
.toggle-button.active .bar:nth-of-type(1){
top: 50%;
transform: rotate(-45deg) translateY(-50%);
}
.toggle-button.active .bar:nth-of-type(2){
display:none;
}
.toggle-button.active .bar:nth-of-type(3){
bottom: 50%;
transform: rotate(45deg) translateY(50%);
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
position:relative;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.navbar-links ul li ul{
display:none;
flex-direction: column;
position:absolute;
background:#d0d0d0;
max-width: 100%;
}
.navbar-links ul li ul li a{
color : black;
}
.navbar-links ul li ul li a:hover{
color : white;
}
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></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> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li id="dropdown-trigger">Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
Maybe, you can easily understand the code which I added.
I hope It will help
I'm very new to html/css/JS and I've made a sticky Navigation bar for my page but I'm having trouble with where the clickable area is for my tags on the navbar. I've some how gotten the clickable area to the left of my text not the text itself.
If someone could shed some light on what I've done wrong it would be a massive help.
Thanks!
<div class="page-navigation">
<nav id="navbar">
<div class="social">
<img src="Images/facebook-logo.png" alt="facebook link" />
<img src="Images/twitter-logo.png" alt="twitter link" />
<img src="Images/linkedin-logo.png" alt="linkedin" />
</div>
<img
src="Images/Logo-ADC%20Systems.png"
class="logo"
alt="Logo ADC Systems"
/>
<ul id="menu">
<li><a class="nav__links" href="index.html"></a>Home</li>
<li><a class="nav__links" href="About%20us.html"></a>About Us</li>
<li><a class="nav__links" href="Services.html"></a>Services</li>
<li><a class="nav__links" href="Contact%20us.html"></a>Contact Us</li>
</ul>
</nav>
.home-navigation{
width: 100vw;
height: 100vh;
background-image: url("Images/Home-Background.jpg");
background-size: cover;
}
.page-navigation{
width: 100vw;
height: 80vh;
background-color: #2D3142;
background-size: cover;
}
.social{
float: right;
padding-right: 0.8rem
}
.social img{
width: 40px
}
nav{
position: relative;
z-index: 1;
Width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box
}
#navbar a {
float: left;
color:#2D3142;
text-align: center;
padding: 14px;
text-decoration: none;
}
.logo{
width: 300px;
margin: 5px 0;
}
nav ul{
background: #FFFFFF;
width: 100%;
margin-top: 5px;
}
nav ul li{
position: relative;
display: inline-block;
list-style: none;
margin: 20px 30px;
color: #EF8354;
cursor: pointer;
}
#navbar ul li:hover{
color:#2D3142;
transition: 0.3s ease-out;
}
nav.sticky{
position: sticky;
top: 0;
left: 0;
padding: 10px 8%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
transition: padding 1s;
}
nav.sticky ul{
width: auto;
}
See
<li><a class="nav__links" href="index.html"></a>Home</li>
They should be the following, note where the Home is, inside the link not outside
<li><a class="nav__links" href="index.html">Home</a></li>
I made my own responsive footer without any css framework but on mobile view it becomes toggle.
The problem is when i toggle the button it toggles downward, not upward. Thank you.
Please check the code snippet if how do I deal on toggling upward.
If you guys think there is more appropriate and good approach to make good responsive footer, it would gladly be much appreciated.
But in this case, I am just missing something. Thank you
$(document).ready(function() {
$(".footer-toggle-btn").click(function() {
if ($(this).text() == "☰") {
$(this).text("✖");
$('.footer-container').css('display', 'block');
} else {
$(this).text("☰");
$('.footer-container').css('display', 'block');
}
$("#footer li").toggle("slow");
});
});
.footer-container {
max-width: 1200px;
width: 90%;
padding: 0px 5%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.footer-container li {
list-style-type: none;
}
.footer-container a {
text-decoration: none;
color: white;
}
.footer-container ul {
width: 65%;
display: block;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
width: 100vw;
}
.footer-toggle-btn {
display: none;
background-color: black;
color: white;
padding: 5px 0px;
height: auto;
width: 50px;
font-size: 23px;
border: 3px solid black;
cursor: pointer;
}
.footer-toggle-btn:hover {
background-color: black;
color: #f39700;
}
#media only screen and (max-width: 700px) {
#footer {
height: auto !important;
}
.footer-container {
display: block;
flex-direction: column;
width: 100%;
padding: 0;
}
.footer-container ul {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.footer-container a {
display: block;
padding-left: 15px;
}
.footer-container li {
margin: 0;
width: 100%;
height: 50px;
line-height: 50px;
}
.footer-container li:hover {
background-color: #f39700;
}
.footer-container li:hover a {
color: black;
font-weight: bold;
}
.footer-toggle-btn {
display: block;
}
}
#footer {
background-color: black;
height: 100px;
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="footer">
<footer class="footer-container">
<ul class="feed-list">
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<button class="footer-toggle-btn">✖</button>
</ul>
</footer>
</section>
<div class="header">
<div class="navflex">
<img src="logo.svg">
<nav>
<ul>
<li id="box"><input type="text" class="search-bar" placeholder="Search"></li>
<li><img src="notification.svg" class="notication"></li>
<li><img src="user_1.svg"></li>
</ul>
</nav>
</div>
CSS CODE:
ul{
margin-left: 31px;
}
a{
text-decoration: none;
color: #333;
}
image{
width: 100%;
}
.search-bar{
padding-left: 20px;
}
.navbar{
/*background-color: #047aed;*/
color: #fff;
height: 50px;
width: 100%;
}
.navflex{
/*max-width: 1100px; */
margin: 0 auto;
overflow: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
flex: 1 1 auto;
position: sticky;
z-index: 100;
border-top: 0;
}
.navflex > nav > ul {
display: flex;
flex-grow: 1;
/*flex-direction: row;
justify-content: flex-end;*/
align-items: center;
overflow: hidden;
/*position: relative;*/
}
.navflex > nav {
width: 100%;
}
.navflex > nav > ul > li {
width: auto;
margin: 10px;
}
.navflex > nav > ul > li > input {
width: 80%;
}
#box > input{
width: 98%;
height: 30px;
border: 1px;
background: url(search.svg) no-repeat;
background-size: 15px;
background-position: left;
}
#box{
width: 100%;
}
I am trying to make my navbar sticky/fixed/absolute. I want it to be fixed at top of the page and when scroll it must not vanish away. I have tried changing the position attribute multiple times but have found no success. I also tried using z-index to be 100 and still there has been no change in navbar. Kindly help me out.
I think it will work.
ul{
margin-left: 31px;
}
li {
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
image{
width: 100%;
}
.search-bar{
padding-left: 20px;
}
.navbar{
/*background-color: #047aed;*/
color: #fff;
height: 50px;
width: 100%;
}
.navflex{
/*max-width: 1100px; */
margin: 0 auto;
overflow: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
flex: 1 1 auto;
position: sticky;
z-index: 100;
border-top: 0;
}
.navflex > nav > ul {
display: flex;
flex-grow: 1;
/*flex-direction: row;
justify-content: flex-end;*/
align-items: center;
overflow: hidden;
/*position: relative;*/
}
.navflex > nav {
width: 100%;
}
.navflex > nav > ul > li {
width: auto;
margin: 10px;
}
.navflex > nav > ul > li > input {
width: 80%;
}
#box > input{
width: 98%;
height: 30px;
border: 1px;
background: url(search.svg) no-repeat;
background-size: 15px;
background-position: left;
}
#box{
width: 100%;
}
.header {
position: sticky;
top: 0;
}
<div class="header">
<div class="navflex">
<img src="logo.svg">
<nav>
<ul>
<li id="box"><input type="text" class="search-bar" placeholder="Search"></li>
<li><img src="notification.svg" class="notication"></li>
<li><img src="user_1.svg"></li>
</ul>
</nav>
</div>
</div>
This should do it:
.header {
position: sticky;
top: 0;
}
Hi currently doing a quick website, got the header and toggle navigation in place, however due to the fact the nav bar is fixed it wont allow scrolling on the nav if the navbar is taller than the height of the screen, tried the overflow: scroll and position relative but cannot seem to find a work around, appreciate any assistance provided.
function NavToggle() {
var tn = document.getElementById("nav-bar")
if(tn.style.display === "none"){
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
*{
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html, body{
overflow-y: auto;
}
ul{
margin: 0;
padding: 0;
}
/* Header and Navigation */
header{
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
}
nav{
display: none;
z-index: 2;
}
.title-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul{
list-style-type: none;
}
nav li{
height: 50px;
}
.title-wrapper>a{
font-size: 16px;
}
a{
color: #999;
}
nav a{
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover{
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle{
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button{
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
Just add overflow-y: auto;max-height: 100vh; to .header like this:
function NavToggle() {
var tn = document.getElementById("nav-bar")
if(tn.style.display === "none"){
tn.style.display = "block";
}
else{
tn.style.display = "none";
}
}
html, body{
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
max-height: 100vh;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul{
list-style-type: none;
}
nav li{
height: 50px;
}
.title-wrapper>a{
font-size: 16px;
}
a{
color: #999;
}
nav a{
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover{
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle{
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button{
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
Hope this will help you.
You have made the entire <header> fixed but you need to make title-wrapper as fixed, Here is working code
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: relative;
z-index: 1;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
position: fixed;
background-color: #222222;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>