This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
hello i'm trying to make a nav bar using the position:sticky property but for some reason its not sticking i've searched the web for answers but couldnt find any fix so here I am
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!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://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have litterally no idea why it would not be working it might be me using it in the wrong place or something.
I'm planning to make it more responsive but that for another day so please excuse the bad UI on smaller windows.
you added position: sticky; to the <ul>. However sticky does not move the element out of the flow. Means the element will leave the viewport once the parent element leaves the viewport.
As such you have to add the sticky not to the <ul> but the containing <div>
sticky is supported by all browsers with exeption of IE (that will be deprecated starting at the 16th August 2021 and does not support sticky even with vendor-prefix)
/* css changes */
.navBar {
position: sticky;
top: 0;
}
/* original css */
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!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://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
Related
Example of what the navigation bar should look like
I'm making my first website in html/css and I want to make a fixed navigation bar that can adapt to mobile screens. It should have a left aligned 'home' button and the rest of the buttons are center aligned. How can I make this with HTML/CSS? Thank you!
Here is my code at the moment:
body {
background-color: white;
margin:0;
}
li a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
ul {
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline-block;
}
li a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
li a:hover {
color:black;
}
.left-links{
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<ul>
<div class="left-links">
<li>Home</li>
</div>
<nav>
<li>Work</li>
<li>Me</li>
<li>Play</li>
</nav>
</ul>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
You can achieve what you want by changing flex:1 1 200px; to just flex: 0.5; under .left-links in your css file.
EDIT: Sorry I forgot to also tell you to add display: flex; to ul in your css file as well
I've altered the code a little, but this is how I would tackle it.
By placing each section of links that are related together in a flex-box div, and displaying the entire nav element itself as a flex. We can independently address each grouping of links, as well as the nav as a whole.
Adding the flex-grow to the .right-links will inherit the entirety of the remaining space left from the home button, and adding in justify-content: center; centers the .right-links in that remaining space. This will work across screen widths and reduces the clutter of using lists when they might not be needed.
Hope this helps!
body {
background-color: white;
margin:0;
}
a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
nav {
display:flex;
align-items:center;
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
a:hover {
color:black;
}
.left-links{
display:flex;
text-align: left;
}
.right-links{
justify-content:center;
flex-grow:1;
display: flex;
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<nav>
<div class="left-links">
Home
</div>
<div class="right-links">
<div>
Work
</div>
<div>
Me
</div>
<div>
Play
</div>
</div>
</nav>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
I am in the process of coding a contact page for my business's website but for some reason, when I run my code, my header and my paragraph are distanced very far apart even though I set both the margin and padding to 0. I don't know if this is a CSS glitch or if I did something wrong.
Help would be very much appreciated.
Thanks
<!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 href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p class = "center">Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
It's because you are positioning your paragraph absolutely on the page. You have it set as top: 50%, which means place the paragraph in the middle of the page vertically.
To center it, you can simply use
.center-text {
text-align: center;
}
The .center class seems to be your wrapper class, remove it from the p tag, and center the text with text-align:center.
Another option id add the "flex-box version" you used to center the title: display: flex; place-content: center;
Keep something like this:
<!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 href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
text-align:center;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p>Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
cursor: pointer;
border-radius:none;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(1px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Edit: The below solution causes accessibility problems for keyboard users who rely on a visual outline to know where on a page they are focused. Instead, consider adding onclick="this.blur(); to unfocus the button after clicking so that the outline doesn't appear after clicking but still appears when focusing on the button.
<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>
Your problem appears to be fixed by adding outline: none; inline to the button. You have this specified in your CSS but it appears some browsers are overriding your specification.
<button class="boton" href="#about" style="outline: none;">CLICK!</button>
your problem is caused by bootstrap. add button:focus{outline:none!important}
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(10px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
background-color:black;
}
button:focus{
outline:none!important;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.