I have a fairly simple header that I can get to look the way I want though I found that for my RWD to allow the header to work anywhere and to get the look for the whole page that want a more organized look to webpage. I am now trying the grid-template with the flexbox within the grid tracks and my header doesn't like when I want the gap between the links. I created a js fiddle https://jsfiddle.net/Arandolph01/vp8xnrmL/2/
I idea is the best Responsive Web Design and I keep getting the logo and the image disappearing almost completely when I change the size of the screen.
I have used the right metrics and auto where it says along with latest layouts so appreciate filling me in.
Update
.nav_menu a {
margin: 1em 3.7em;
}
body {
background-image: url(https://i.imgur.com/sCfeeeY.png),url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-template-rows: 1fr 1fr auto auto 1fr 1fr;
grid-template-columns: minmax(40em, 25%) 1fr;
grid-column: 1;
flex: 0 1 28em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
margin-right: 3em;
}
.sectionfirst {
padding-top: 5em;
}
.nav_menu {
margin-right: 4em;
}
.nav_menu {
float: left;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:2em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.wrap#gsbutton {
padding-top: .5em;
padding-right: 0;
padding-left: 0;
margin-right: 3em;
margin-left: 0em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontend Challenge Developer Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<section>
<section class="row header" id="sectionheader">
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="https://i.imgur.com/4kctnTg.png"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href=""><!--index.html-->Home</a>
<a class="active" id="pricingheader" href=""><!--pricing.html-->Pricing</a>
<a class="active" href=""><!--products.html-->Products</a>
<a class="active" href=""><!--aboutus.html-->About Us</a>
<a class="active" href=""><!--community-->Community</a>
</nav>
<a class="gsbutton" id="gsbutton" href="">
<img src="https://i.imgur.com/XZY4xX0.png" alt="">
</a>
</div>
</div>
</section>
</body>
</html>
I want the section to be spaced by 1-3em.
Set margin on the child element instead of padding on your flex item.
.nav_menu a {
margin: 0 1em;
}
Checkout Example
All you had to do was add a bit of margin to the active class.
body {
background-image: url(https://i.imgur.com/sCfeeeY.png), url(https://i.imgur.com/sCfeeeY.png);
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.a {
padding: 2px 0px;
text-decoration: none;
font-size: 17px;
font-family: Verdana;
font-weight: bold;
color: black;
justify-content: space-around;
}
.row {
flex: 2 auto;
grid-column: 1 10em;
grid-row: auto;
display: flex;
}
.fullwebpage {
display: grid;
grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr auto;
grid-column: 1;
grid-gap: 5em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
margin-right: 3em;
}
.section_bg .head_bg a:active {
color: black;
}
.footer a:active {
color: white;
}
.table-row {
width: 100%;
display: flex;
}
.topfooterbanner {
width: 100%;
background-color: orange;
height: 100%;
bottom: 0em;
}
.nav_menu {
float: left;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.wrap {
display: inline-flex;
/* float: left; */
/* flex: 3 auto; */
width: 100%;
/* margin-left: 10em; */
margin-top: 2em;
/* padding: 1em; */
/* text-align: center; */
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.active {
margin: 5px;
}
<section class="row header" id="sectionheader">
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="https://i.imgur.com/4kctnTg.png"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href="index.html">Home</a>
<a class="active" id="pricingheader" href="pricing.html">Pricing</a>
<a class="active" href="product.html">Products</a>
<a class="active" href="about.html">About Us</a>
<a class="active" href="community.html">Community</a>
</nav>
<a class="gsbutton" id="gsbutton" href="pricing.html"><img src="https://i.imgur.com/jfNTTt4.png" alt=""></a>
</div>
</div>
</section>
Related
I am working on a school project I want to do a responsive text which is similar to the picture below and further when it switch to mobile view the text have to change its position and fit below the hero image.
how to change the size according to the screen size?
I am a beginner trying to learn things on my own.
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
* {
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;
}
.img-hover-zoom {
height: 500px;
overflow: hidden;
float: left;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.5);
}
.hero-text {
grid-area:auto;
overflow: hidden;
text-align: left;
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
}
h1 {
text-align: left;
text-transform: uppercase;
font-family: Agency FB, Helvetica, sans-serif;
font-size: 2em;
}
p {
font-size: 3vh;
font-family: Arial, Helvetica, sans-serif;
}
#media (max-width: 650px) {
.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;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</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>
<div class="img-hover-zoom">
<img src="/img/hero.jpg" alt="This zooms-in really well and smooth" width="500px" height="500px">
</div>
<div class="hero-text">
<h1>Travel around the World</h1>
<br><br>
<p>Traveling is a very crucial part of life as it is the best way to get out of the busy schedule.
It is also to experience life in different ways.Traveling is actually a good remedy for stress, anxiety
and depression. It also improves the mental and physical health. We only have one life and
we should thank it for making us more advanced creature on this planet. Not only do we get to
experience the beauty of nature, different geographies ,topographies, and people.
</p>
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
on my website
how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!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="style.css">
<title>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>
Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0
I have a slide menu that appears on smaller screens and it has three links that go to different sections.
The problem is the links will only work the first time you open the slide menu. If you close it then open it again, it wont go anywhere.
JS Code:
function openSlideMenu() {
document.getElementById('sideMenu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('sideMenu').style.width = '0';
document.getElementById('sideMenu').onclick = function(e) {
e.preventDefault();
};
}
demo:
https://jsfiddle.net/mnuao49k/2/
Thanks.
you just need to delete the function inside closeSlideMenu() because it prevent the click on the links, also, since you are not redirecting to another page, this anchor elements can be just elements.
// Slide Menu
function openSlideMenu() {
document.getElementById('sideMenu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('sideMenu').style.width = '0';
}
window.onscroll = function() {
const nav = document.querySelector('.navBar');
if (window.pageYOffset > 43) {
nav.style.position = "fixed";
nav.style.backgroundColor = "black";
} else {
nav.style.position = "absolute";
nav.style.backgroundColor = "";
}
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* Start of navbar */
.navBar {
display: grid;
height: 63px;
grid-template-columns: 1fr 150px 1fr;
width: 100%;
grid-template-areas: "logo center navbar";
font-size: 20px;
position: absolute;
top: 0;
transition: all 0.35s ease;
}
.navBar .logo {
grid-area: logo;
align-self: center;
justify-self: start;
margin-left: 6px;
}
.navBar .logo a {
color: lavender;
text-decoration: none;
font-size: 24px;
font-weight: 500;
}
.navBar .logo a:hover {
color: #4484CE;
transition: .8s;
}
.navLinks {
grid-area: navbar;
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(3, 1fr);
align-self: center;
justify-self: end;
text-align: center;
}
.navLinks a {
text-decoration: none;
color: lavender;
cursor: pointer;
font-size: 18px;
}
.navLinks a:hover {
color: #4484CE;
transition: 0.8s;
}
/* Start of Slide Menu */
.openSlide {
display: grid;
}
.openSlide a {
align-self: center;
margin-left: 6px;
}
.sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
opacity: .8;
}
.sideNav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: lavender;
display: block;
transition: 0.3s;
}
.sideNav a:hover {
color: #4484CE;
}
.sideNav .btnClose {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
.about {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "middle2";
background-color: #4484ce;
height: 450px;
align-content: center;
}
.product {
background-color: lavender;
display: grid;
align-content: center;
height: 400px;
background-color: green;
}
.contact {
background-color: lavender;
display: grid;
align-content: center;
height: 400px;
}
#media (min-width: 769px) {
.openSlide {
display: none;
}
}
#media (max-width: 769px) {
.navBar .logo {
grid-area: center;
align-self: center;
justify-self: center;
}
.navLinks {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" id="topPage">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="script.js"></script>
<title>Welcome</title>
</head>
<body>
<header class="navBar" id="top">
<span class="openSlide">
<a href="javascript:void(0);" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#FFF" stroke-width="5"></path>
<path d="M0,14 30,14" stroke="#FFF" stroke-width="5"></path>
<path d="M0,23 30,23" stroke="#FFF" stroke-width="5"></path>
</svg>
</a>
</span>
<div class="logo">
Logo
</div>
<div class="navLinks">
About
Products
Contact
</div>
<div id="sideMenu" class="sideNav">
×
About
Products
Contact
</div>
</header>
<div class="about">
<h1 id="about">This is about section</h1>
</div>
<div class="product">
<h1 id="product">This is products section</h1>
</div>
<div class="contact">
<h1 id="contact">This is contact section</h1>
</div>
</body>
</html>
I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes.
I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</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>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
here my css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
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%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
and the important part I guess, my javascript:
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Thanks
it will be toggle-button not toggleButton in
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
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%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</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>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
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>