My problem is that whenever I scroll down, a <section> completely covers the navbar. The Navbar is fixed, and is set to be at the top.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Gotu&display=swap"
rel="stylesheet"
/>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Pelicans</title>
</head>
<body>
<div class="navbar">
<a href="#home"
><img
class="logo"
height="100"
src="https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-1/p200x200/15068898_1226936174051780_7166698313496052354_o.jpg?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=ocyXiBkw3rcAX8xha1J&_nc_ht=scontent-lax3-1.xx&_nc_tp=6&oh=a21d0f67f860f6befb0cdc68e01c3c2a&oe=5EB3D4BA"
width="100"
alt=""
/></a>
<a class="link" href="#home">Home</a>
<a class="link" href="#about">About</a>
<a class="link" href="#gallery">Gallery</a>
<a class="link-contact" href="#contact">Contact</a>
</div>
<section id="home"></section>
<section id="about"></section>
<section id="gallery"></section> <!-- Not in use yet -->
<section id="contact"></section> <!-- Not in use yet -->
</body>
</html>
CSS:
body {
background-color: #5cdb95;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1em;
padding-top: 0em;
padding-bottom: 0em;
grid-gap: 0em;
background: #edf5e1;
grid-auto-rows: minmax(100px, auto);
border-bottom-style: solid;
border-bottom-color: #05386b;
font-family: "Gotu", sans-serif;
font-size: 25px;
}
.navbar > .link {
text-align: center;
text-decoration: none;
height: 100px;
padding: 32px;
transition: background-color 0.7s;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-family: inherit;
}
.navbar > .link:hover {
background-color: #8ee4af;
font-family: inherit;
}
.logo {
border-radius: 50%;
}
.link-contact {
padding-top: 0.6em;
text-align: center;
height: 65px;
width: 180px;
background-color: #379683;
text-decoration: none !important;
border-radius: 20px;
color: #edf5e1;
transition: background-color 0.7s;
font-family: inherit;
}
.link-contact:hover {
text-decoration: none !important;
color: #edf5e1;
background-color: #287566;
font-family: inherit;
}
#home {
background-color: blue;
height: 680px;
}
#about {
background-color: inherit;
height: 680px;
position: relative;
}
Note: The first section doesn't overlap the navbar, just the second section.
Stack Overflow is telling me that too much of this question is code so here is some text...
It is occuring for z-index issue.
Give it like this:
#about {
background-color: inherit;
height: 680px;
position: relative;
z-index: -99;
}
Related
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
I created a nav which contains a list and currently when I hover on the last 3 list items, an image appears just below the list item(or tab). However, when each image appears it overlaps the bootstrap carousel just beneath the navbar. How do I make the bootstrap carousel move down so that it sits just below the image when the image appears on hover of each tab? Any answers would be helpful.
see below code
#nav{
height: 5vw;
width: 80%;
margin-left: auto;
margin-right: auto;
background: gray;
margin-top: 0;
}
#nav-ul li{
display: block;
list-style-type: none;
background: white;
border-radius: 10px;
border: 2px solid blue;
width: 16%;
position: relative;
}
#nav-ul li:not(:first-child){
margin-left: 2%;
}
#nav-ul li a {
color: black;
text-decoration: none;
font-size: 1.1vw;
}
#nav-ul{
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-1:hover #li-img-1{
display: block;
margin-top: 0;
}
#li-2 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-2:hover #li-img-2{
display: block;
margin-top: 0;
}
#li-3 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-3:hover #li-img-3{
display: block;
margin-top: 0;
}
#myCarousel{
width: 100%;
margin: auto;
background: blue;
color: white;
text-align: center;
height: 3vw;
}
.carousel-inner div{
display: flex;
align-items: center;
height: 3vw;
}
.carousel-inner div p{
line-height: 3vw;
font-size: 1.1vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" initial-scale="1.0">
<title>Money CV</title>
<link href="moneycv.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<ul id="nav-ul">
<li>Home</li>
<li>-</li>
<li id="li-1">Employee's Portal
<img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
</li>
<li id="li-2">Services
<img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
</li>
<li id="li-3">Organising
<img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<p>Testimonial 1</p>
</div>
<div class="item">
<p>Testimonial 2</p>
</div>
<div class="item">
<p>Testimonial 3</p>
</div>
</div>
</div>
</body>
</html>
`
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I created a nav which contains a list and currently when I hover on the last 3 list items, an image appears just below the list item(or tab). However, when each image appears it overlaps the bootstrap carousel just beneath the navbar. How do I make the bootstrap carousel move down so that it stays below the image when the image appears on hover of each tab?
#nav{
height: 5vw;
width: 80%;
margin-left: auto;
margin-right: auto;
background: gray;
margin-top: 0;
}
#nav-ul li{
display: block;
list-style-type: none;
background: white;
border-radius: 10px;
border: 2px solid blue;
width: 16%;
position: relative;
}
#nav-ul li:not(:first-child){
margin-left: 2%;
}
#nav-ul li a {
color: black;
text-decoration: none;
font-size: 1.1vw;
}
#nav-ul{
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-1:hover #li-img-1{
display: block;
margin-top: 0;
}
#li-2 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-2:hover #li-img-2{
display: block;
margin-top: 0;
}
#li-3 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-3:hover #li-img-3{
display: block;
margin-top: 0;
}
#myCarousel{
width: 100%;
margin: auto;
background: blue;
color: white;
text-align: center;
height: 3vw;
}
.carousel-inner div{
display: flex;
align-items: center;
height: 3vw;
}
.carousel-inner div p{
line-height: 3vw;
font-size: 1.1vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" initial-scale="1.0">
<title>Money CV</title>
<link href="moneycv.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<ul id="nav-ul">
<li>Home</li>
<li>-</li>
<li id="li-1">Employee's Portal
<img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
</li>
<li id="li-2">Services
<img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
</li>
<li id="li-3">Organising
<img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<p>Testimonial 1</p>
</div>
<div class="item">
<p>Testimonial 2</p>
</div>
<div class="item">
<p>Testimonial 3</p>
</div>
</div>
</div>
</body>
</html>
I'm not totally sure but you can move other elements when you hover certain elements likeso:
.hover {
background-color: blue;
padding: 8px;
}
.move {
background-color: red;
padding: 8px;
transition: 0.5s;
}
.hover:hover ~ .move {
margin-top: 48px;
}
<div class="hover">Hover Me</div>
<div class="move">I move</div>
You could read more about css selectors here (Such as the ~ I used in the hover example). There are also many ways to move the item besides the margin-top such as top.
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...
I'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position