Here I have a responsive navbar which I want to be absolute and menu items to float right but when I apply position property to it, menu items floats to left. Also applying absolute position to nav makes hamburger for small screen float left and when it opens the closing icon disappears.
Please help me figure out the right solution to make nav absolute but not affect the menu items and hamburger
Note: While checking code snippet try it for both desktop and mobile screen
document.getElementById("hamburger").addEventListener("click", function() {
this.classList.toggle("active");
document.querySelector(".mobile-menu").classList.toggle("active");
});
body {
background-color: rgb(0, 0, 0);
margin: 0;
overflow-x: hidden;
cursor: pointer;
}
img {
margin-top: 100px;
}
#media (max-width: 767px) {
img {
margin-top: 40px;
height: 80px;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/* Navigation Menu */
nav {
height: 70px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
nav #menu {
display: flex;
height: 100%;
}
nav #menu li {
padding: 0px 30px;
line-height: 70px;
transition: all 0.3s ease-out;
}
nav #menu li a {
color: #fff;
}
nav #menu li a:hover {
color: rgb(238, 215, 12);
}
#media (max-width: 767px) {
nav #menu {
display: none;
}
}
/* Mobile Menu */
#hamburger {
position: absolute;
float: right;
right: 10px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#hamburger .line {
height: 5px;
background: rgb(238, 215, 12);
margin: 5px auto;
backface-visibility: hidden;
}
#hamburger.active #one {
transform: rotate(45deg) translateX(6px) translateY(6px);
}
#hamburger.active #two {
opacity: 0;
}
#hamburger.active #three {
transform: rotate(-45deg) translateX(10px) translateY(-12px);
}
#media (max-width: 767px) {
#hamburger {
visibility: visible;
opacity: 1;
}
}
.mobile-menu {
z-index: 1;
position: absolute;
top: 0px;
background: black;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-out;
display: table;
}
.mobile-menu .mobile-menu__items {
height: 50px;
display: table-cell;
vertical-align: middle;
}
.mobile-menu .mobile-menu__items li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 35px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.mobile-menu .mobile-menu__items li:hover {
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li:hover a {
transition: all 0.3s ease-out;
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li a {
color: white;
}
.mobile-menu.active {
visibility: visible;
opacity: 0.99;
}
#media (min-width: 768px) {
.mobile-menu {
visibility: hidden !important;
}
}
/* Main */
h1 {
z-index: 1;
color: #fff;
left: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- Navigation Menu -->
<header>
<nav>
<img src="images/logo.svg" alt="logo">
<ul id="menu">
<li>HOME</li>
<li>WORK</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="hamburger">
<div class="line" id="one"></div>
<div class="line" id="two"></div>
<div class="line" id="three"></div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu">
<ul class="mobile-menu__items">
<li>HOME</li>
<li>WORK</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
<!-- Main -->
<main>
<h1>hello</h1>
</main>
</body>
</html>
add this style to your css
change menu ul li a
nav ul li a{display:block;width:100%;float:right;text-align:right;}
Related
Hello I just started with HTML & CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="images/RATA-small.svg" alt="RATA">
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
position: relative;
z-index: 0
}
I have to scroll to see the full image in the div.
That sounds like the image height is simply too large for your screen, here I set it to 200px:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
z-index: 0;
width: 100%;
height: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
</body>
</html>
Click the Full Page button to see the snippet in full screen of your device
I'm trying to add a header on top of this image with a gradient that I've made but it gives me a weird white background as such https://i.stack.imgur.com/ppuJq.png I want the text on top of the image to have a transparent background. Made the navbar black so its easier to see but anyway, how do I remove it? I am aware that the js script is unfinished if that has anything to do with it.
here is my code
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>
It's because of the background color on body tag and the transparent background on .WelcomeMenu. Ways to fix (Only one of them):
Add a background color to .WelcomeMenu
Have a parent element and set the background color to black
Make the background color of body black
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
background-color: red
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>
The image that you are using is a background image! so for a better solution you can make it the background of the div.WelcomeMenu.
The white color is the background of the page (by default - which is blank white page). and the order of the elements is:
Navbar - black background
h1 - the background of the page
img - the image itself
that means, the h1 is between the two elements.
In case you still want the elements as they are, you can simply add:
.WelcomeMenu {
position: relative;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
position: absolute;
top: 100px; (change it as you wish)
left: 100px; (change it as you wish)
}
The Code:
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
position: relative;
height: 85vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </h1>
</div>
</section>
I'm trying to make a responsive website and when I put my paragraph on the page and I make the screen smaller the paragraph goes all the way down the screen and not really in a paragraph. It is just a long word tower. How can I fix this? Here is a picture of what I am talking about. https://i.stack.imgur.com/HYJzs.png
and also how do I make it so thre is not that much space between the words?
here is my code:
enter cod
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
margin-left: 100px;
margin-top: 150px;
width: 40%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
at .contenthome2 you have defined width 40% so that is why for mobile view it takes up only 40% of width , you can give 40% for web view and using media queries can increase the width for paragraph as per your requirements .also margin-left:100px and margin-right:150px will work fine for web view but will take more space for mobile view . you can try using value in % .
I have modified code and given width:100% and padding:10% 15%;
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
padding: 5% 10%;
width: 100%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
Navbars...ugh. My code is supposed to be displaying a navbar on two separate pages but the margin is way too much to the right on the signin page. It looks very different from the home page. For reference, I have two separate files: one for the home page with style.css, and one for the login form with signin.css. The code for the navbar is the same for each but they're displaying very different results on the two pages.
So what I'm wondering is, why is it like this and what can be done to fix it? Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<img class="logo" src="tsLogo.png">
<ul class="links">
<li>Home</li>
<li>Problem</li>
<li>Features</li>
<li>About</li>
<li>Login</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
style.css:
html {
scroll-behavior: smooth;
}
body {
/*background-color: #00BFFF;*/
width: 100%;
}
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
#media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
signin.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="signin.css" />
<title>Login & Sign up Form</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<img class="logo" src="tsLogo.png">
<ul class="links">
<li>Home</li>
<li>Problem</li>
<li>Features</li>
<li>About</li>
<li>Login</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
signin.css:
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
/* why is this wierd effect happening? */
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
#media screen and (max-width: 960px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
you're using bootstrap in index.html but you're not using it in signup.html, that's what is causing your navbar to go "whacky"
Btw, you should not be repeating the same css from one page to the other, try to do reusable code, it makes no sense to copy and paste all that navbar css from index to signup
edit: here is the sandbox I used to play around with your code sandbox, view the result with this link
Description: I have a responsive navbar which is opening and closing perfectly fine.
Problem: When I click on a link, It doesn't close itself. I have to manually close it.
Kindly find the codebase below:
navbar.component.html
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<div class="header header-fixed">
<div class="navbar container">
<div class="logo">
<div class="logo">REYA</div>
</div>
<input type="checkbox" id="navbar-toggle">
<label for="navbar-toggle"><i></i></label>
<nav class="menu">
<ul>
<li><a (click)="goToHome('home')">Home</a></li>
<li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
<li><a (click)="goToServices('services')">Services</a></li>
<li><a (click)="goToContact('contact')">Contact</a></li>
<li><a>Login</a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<router-outlet></router-outlet>
navbar.component.css
body {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #242424;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 60px;
}
.navbar .logo {
height: 80px;
}
.navbar .logo:hover {
color: #777777;
}
.navbar nav {
flex: 8;
}
.navbar label {
user-select: none;
cursor: pointer;
padding: 28px 20px;
position: relative;
z-index: 3;
}
.navbar label i {
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
font-style: normal;
font-weight: normal;
}
.navbar label i:before,
.navbar label i:after {
content: '';
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar label i,
.navbar label i:before,
.navbar label i:after {
display: block;
background: #eee;
}
.navbar label i:before {
top: 5px;
}
.navbar label i:after {
top: -5px;
}
.navbar #navbar-toggle {
display: none;
}
.header #navbar-toggle:checked~.menu {
visibility: visible;
opacity: 0.99;
}
.header #navbar-toggle:checked~label {
background: #212121;
border-radius: 50%;
}
.header #navbar-toggle:checked~label i {
background: transparent;
}
.header #navbar-toggle:checked~label i:before {
transform: rotate(-45deg);
}
.header #navbar-toggle:checked~label i:after {
transform: rotate(45deg);
}
.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
top: 0;
}
#media (max-width: 768px) {
.navbar nav {
visibility: hidden;
opacity: 0;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
display: table;
background: #ddd;
}
.navbar nav ul {
margin: 0;
padding: 20px 0;
display: table-cell;
vertical-align: middle;
}
.navbar nav li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.navbar nav li:hover {
background: #525151;
}
.navbar nav li:hover a {
color: #fff;
transition: all 0.3s ease-out;
}
.navbar nav li a {
color: #212121;
}
}
#media (min-width: 768px) {
.navbar nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
text-align: center;
list-style: none;
}
.navbar nav li {
flex: 1;
}
.navbar nav li a {
display: block;
padding: 0 8px;
font-size: 16px;
line-height: 60px;
color: #fff;
text-decoration: none;
}
.navbar nav li.active {
background: #555;
}
.navbar nav li:hover {
background: #333;
}
.navbar label {
display: none;
}
}
.navbar .logo {
flex: 3;
}
.navbar .logo a {
display: block;
font-size: 30px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-left: 20px;
margin-top: 10px;
}
.navbar .logo a:hover {
color: #4d4c4c;
transition: .2s;
}
I have tried many options including:
Commenting out most of the lines
Removing the media queries
Removing the click event
Nothing is working! Can somebody please help me?
I'm not sure how you implemented your JS functions, but I think I would simulate a click on the navbar toggler or just make a function called whenever the user navigates, that makes sure the navbar is closed after navigation.