I am facing some issue with Bootstrap navbar. I am using Bootstrap v5.0.
Whenever the bootstrap navbar expands, the contents below it is also going down. I don't want that. I want the content not to go down.
I set the position: fixed but it didn't work and behaved abnormally. I want the nav to be fixed at the top.
Full code:
<!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="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi. Hic similique autem iure distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi. Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores, omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit explicabo delectus quos excepturi, aut nam incidunt eius voluptas non harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla, temporibus incidunt alias commodi inventore error eligendi libero ea atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
To fix the header you can simply use
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
But in that case your main content will go beneath the header, to fix that add a top margin of YOUR_HEADER_HEIGHT to the main content, something like this
#header-texts {
margin-top: 60px; // your header height
height: 90vh;
align-items: center;
}
I have made some changes to you code. What I have done is wrapping your nav component in a navbar-holder class and adding necessary styles to the class which you can find in the code. Another suggestion from my side would be whenever you are going to scroll you should add another style to the navbar like adding a dark background because currently your navabr background is transparent and it would not look good when scrolled.
<!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="icon" href="./images/favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
.navbar-holder {
position: fixed;
top: 0;
width: 100%;
}
.with-bg {
background: #000000 !important;
}
header {
background: linear-gradient(
rgba(45, 44, 48, 0.753),
rgba(45, 44, 48, 0.753)
),
url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="navbar-holder" id="navigation-holder">
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
id="navigation"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNavAltMarkup"
>
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col"></div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">
YOUR FAVORITE SOURCE OF FREE<br />BOOTSTRAP THEMES
</p>
<hr
class="mb-4"
style="
width: 5%;
margin: auto;
height: 5px;
border: none;
color: #ff0000;
background-color: #ff0000;
opacity: 1;
"
/>
<p id="header-texts-2">
Start Bootstrap can help you build better websites using the
Bootstrap<br />framework! Just download a theme and start
customizing, no strings attached!
</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto
ducimus soluta inventore quibusdam excepturi. Hic similique autem iure
distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo
cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam
ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem
velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae
quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius
laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum
est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis,
numquam enim deleniti a, pariatur laboriosam fugiat dignissimos
perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero
ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia
laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo
nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio
aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci
ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque
blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi.
Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium
aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores,
omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod
distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione
non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit
explicabo delectus quos excepturi, aut nam incidunt eius voluptas non
harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla,
temporibus incidunt alias commodi inventore error eligendi libero ea
atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<script>
document.addEventListener("scroll", () => {
const { scrollTop } = document.documentElement;
const nav = document.querySelector("#navigation-holder");
if (scrollTop === 0) {
nav.classList.remove("with-bg");
} else {
nav.classList.add("with-bg");
}
});
</script>
</body>
</html>
Related
I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
#header-nav {
background-color: #DEB887;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 0rem;
padding-bottom: 0.5rem;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
color: blue;
font-family: cursive;
}
h4 {
text-align:center;
font-family: sans-serif;
padding-top: 2vw;
padding-bottom: 4vw;
}
h5 {
text-align: center;
}
#Chicken-tile {
background-color: #8FBC8F;
width: 100%;
margin-top: 5vw;
}
#Beef-tile {
background-color: lightpink;
width: 100%;
margin-top: 5vw;
}
#Sushi-tile {
background-color: blanchedalmond;
width: 100%;
margin-top: 5vw;
}
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Module 3 Solution</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand fw-bold" c href="#">Food, LCC</a>
<button class="navbar-toggler d-lg-none d-md-none d-sm-none border-dark mb-1 mt-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-lg-0">
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-dark">
<a class="nav-link" href="#">Chicken</a>
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-top-0 border border-dark">
<a class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item d-lg-none d-lg-md-none text-center fw-bold border-top-0 border border-dark">
<a class="nav-link" href="#">Sushi</a>
</li>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</div>
<h4>Our Menu</h4>
<div class="container">
<div id="home-tiles" class="row g-1">
<div id="Chicken-tile">
<h5>Chicken </h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Beef-tile">
<h5>Beef</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Sushi-tile">
<h5>Sushi</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
So, This is a very specific problem:
I want you to run the code, and open it in a full window.
Now please inspect the following code, and toggle the responsive mode.
Now, change the dimensions to something small, until you can see a hamburger.
Now click the hamburger. Works fine?
Now close the hamburger.
Scroll until the end of the page, in this mobile view.
Now try opening the hamburger. Most probably it won't work.
Now scroll to about just below the top of the page in the responsive mobile view. Here open the hamburger. You should be able to see a glitched out half menu like included in the image.
I don't know why or how this is happening. Could someone please reslove this? Any help will be appreciated.
<!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>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
top: 90px;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
I set a top : 80px on your navlinks in your #media (max-width: 800px) and it seems to be working. Take a look.
<!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>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
/* line I added */
top:90px;;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Well, The problem is you never define the top property of the .navlinks. Please check the snippet.
<!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>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
top: 90px;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
just add top: 90px; to #media (max-width: 800px) { .navlinks {top: 90px;}}
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
top: 90px;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
<!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>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Please add CSS property in .navlink class. i have added " top:90px; " in this class. when applying position fixed to any element add specific two side values like left and top, Or top and right, Or right and bottom, Or left and bottom.
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
top: 90px;
background: #222831;
}
I've just started learning CSS, so I made was trying to make a website.
It looks fine on pc. But there's this unwanted space on the right side when I resize the browser or load the website on my phone.
I think the problem lies in my CSS's navbar where I used display type "flex". But nothing I do fixes the problem.
Here's 2 screenshots I took.
1
2
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: 100%;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}
<!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>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li >Home</li>
<li >Gallery</li>
<li >History</li>
<li >Login</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li>IG</li>
<li>FB</li>
<li>SC</li>
<li>WA</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
Any help is appreciated. Thank you
3:Github link
So what's basically happening here is that your navbar is overflowing your body. While section takes only 100% width in body. So in this condition you have following option:
either add a scrollbar to navbar. (Quick fix)
add flex-wrap:wrap;.(navbar options will arrange themselves on second line, also a quick fix.)
Even expand your background with your navbar.(which I did in following code by setting body width:auto; which is 100% by default, now in mobile devices your website will look like just aa minimized version of pc site, Won't say its a good thing but if you want to make it work you have to work with media queries. which is to like write whole code)
Add a collapsing menu.(again media queries and code for creating collapsing navbar)
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: auto;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}
<!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>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li >Home</li>
<li >Gallery</li>
<li >History</li>
<li >Login</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li>IG</li>
<li>FB</li>
<li>SC</li>
<li>WA</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I am trying to create a web page where I have a margin of 50px fixed left and right where the page images have an index that makes it closer to the screen and the margin looks farther off.I also want to achieve a fixed footer like I have for the navigation bar.I tried setting margin left and right to 50px and setting them to a fixed position and tried using the wrapper class to add to the sections both did not yield desired result.
Here is my code below
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>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="bg1">
<header>
<div id="navbar">
<nav class="nav-list">
<ul class="ul-style ">
<li>OUR PORTFOLIO</li>
<li>OUR PROCESS</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</header>
</div>
</div>
</section>
<section id="about">
<div class="bg1">
<div class="about_us">
<a name="#about">
<p>
<h1>ABOUT US</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="process">
<div class="bg1>
<div class=" our_process">
<a name="#process">
<p>
<h1>OUR PROCESS</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="bg1">
<div class="our_portfolio">
<a name="#portfolio">
<p>
<h1>OUR PORTFOLIO</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
</section>
<section id="footer">
<footer>
2020 DeborahPalmTree
</footer>
</section>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
CSS CODE
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
width: 100%;
height: 50px;
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
nav ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color:rgba(255,255,255, 0.5);
width:100%;
height:100%;
}
/*.wrapper{
width:50px;
position:fixed;
height:100%;
background-color:rgba(255,255,255,1.0);
opacity:0;
z-index:1;}
}*/
#main {
height: 100%;
width: 100%;
background-image: url('structural-images/img_house_trees.jpg');
background-size: cover;
background-position: bottom;
}
#about {
height: 100%;
width: 100%;
background-image: url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
}
#process {
height: 100%;
width: 100%;
background-image: url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
}
#portfolio {
height: 100%;
width: 100%;
background-image: url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
}
#fixed{
position: fixed;
height :50px;
width:100%;
background-color: rgba(219,219,219,1.0);
}
You did not use the id selector to reference the footer section in your css page, probably you referenced #fixed in place of footer instead, at the bottom of your CSS file.
// use this instead
#footer{
position: fixed;
bottom: 0;
left: 0;
height :50px;
width:100%;
background-color: transparent;
}
You used the same selector on your menu nav, sections and subdivs (#portfiolio),you need to learn how to create layout properly and make use of css selectors properly. you can learn for free on udemy introduction to web design. Their explanation is very good, and also Kenvin Powell introduction to css course on Youtube.
For a quick fix
Get one parent div with 2 children
<div class="parentDiv">
<div class="bgDiv"></div>
<div class="contentDiv></div>
</div>
you can play with the units to get your desired output, assuming the current screen size is 746px
.parentDiv{
width: 646px;
max-width: 100%;
position: relative;
max-width: 100%;
margin: auto;
perspective: 500px;
height: 100%;
}
.bgDiv{
box-shadow: inset -3px -70px 8px 6vw rgba(255, 255, 255, 0.8);
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url(https://placebear.com/500/300);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: -999;
background-size: cover;
}
.contentDiv{
position: absolute;
z-index: 999;
top: 20px;
left: 50px;
transform: translate3d(25px, 25px, 50px);
padding: 4rem;
}
I am trying to create a responsive website using bootstrap and am having trouble with making my about section does not go past the given area (the dark gray), here is an example of when browser is downsized and also the hero's font when downsized or viewed on a mobile overlaps the face of the picture, however I am not sure on how about doing it.
body,
html {
height: 100%;
font-size: 100%;
}
.cd-fixed-bg {
font-family: 'Open Sans', sans-serif;
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
.cd-scrolling-bg {
min-height: 60%;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
}
.cd-scrolling-bg.cd-color-1 {
height: 60%;
background-color: #212121;
color: #fff;
}
.cd-intro {
color: #212121;
position: absolute;
top: 40%;
bottom: auto;
right: auto;
padding-left: 15%;
text-align: left;
max-height: 70%;
}
.cd-intro-dec-1 {
font-weight: 300;
font-size: 48px;
}
.cd-intro-dec-2 {
font-weight: 400;
font-size: 72px;
}
.cd-content-format {
font-family: 'Open Sans', sans-serif;
}
.header-about {
font-weight: 300;
font-size: 60px;
}
.about-sub {
font-weight: 700;
font-size: 18px;
}
.about-content {
font-weight: 400;
}
.about-img-adjust {
padding-top: 20px;
padding-bottom: 10px;
}
.about-quote {
font-weight: 300;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="cd-fixed-bg cd-bg-1">
<div class="cd-intro">
<h1 class="cd-intro-dec-1">a tribute to</h1>
<h2 class="cd-intro-dec-2">Steve Jobs</h2>
</div>
</div>
<div class="cd-scrolling-bg cd-color-1">
<div class="container cd-content-format">
<div class="row">
<div class="col-xs-6 col-md-4">
<img src="http://i.imgur.com/w39VG2S.jpg" class="about-img-adjust img-responsive" alt="Steve Jobs">
<blockquote class="blockquote about-quote">"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote>
</div>
<div class="col-xs-12 col-md-8">
<h1 class="header-about">about</h1>
<p class="about-sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, saepe voluptate sit. Quasi rem minima veritatis beatae voluptate, temporibus modi quisquam adipisci repellendus nostrum, culpa sapiente fugiat aliquid, sunt deleniti.</p>
<p class="about-content">Architecto repudiandae eaque voluptatibus rem voluptatum veritatis debitis cumque repellat doloribus molestias, officiis soluta quo vitae esse minus quisquam est deleniti porro quia consequatur. Ad libero voluptatibus provident maiores quaerat?</p>
<p class="about-content">Enim eaque mollitia perferendis nesciunt voluptates, aut voluptatum illo ad, accusantium officia iusto ipsam natus totam deleniti cupiditate nihil culpa quibusdam laudantium soluta molestias! Facilis doloremque odio iste dolores provident!</p>
<p class="about-content">Eum a rerum hic, sequi assumenda nostrum facere sit atque, delectus porro quibusdam doloribus dolore? Excepturi alias consequatur minus ipsam, natus voluptatem sunt temporibus eligendi eos expedita. Mollitia magni, ex?</p>
<p class="about-content">Reiciendis, incidunt exercitationem, voluptatum quasi atque, aspernatur beatae, sed a voluptatem praesentium amet quisquam itaque nemo impedit accusamus minus ducimus laboriosam omnis saepe? Libero repellat quam nobis, aperiam at saepe.</p>
<p class="about-content">Minus facere optio veritatis aliquid temporibus quidem voluptatem asperiores rerum? Alias earum dignissimos, tenetur, aspernatur saepe ullam sapiente sint cupiditate cum voluptates vitae natus magnam, repudiandae perspiciatis ea! Et, molestias.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I'm not sure what I'm doing wrong, can anybody please help me find a solution? I have set up my demo here: http://codepen.io/kazera/pen/KNrXxB
Thanks!
You have mistake here
<div class="col-xs-12 col-md-8">
Change it to to
<div class="col-xs-6 col-md-8">