On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling
Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ
I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
.navbar has inherited margins.
Set a margin: 0 on .navbar and give it a height.
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
height: 60px;
}
You should be able to remove the height from .sticky too.
You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.
Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin-top:0;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
padding-top: 1px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class="navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
There are a few things going on here.
1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 1em;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
Related
my problem is that the heading "greeting" influences the position of my navigation bar.
I want it to stay at the top right corner of the screen but the heading moves it down a bit, which is inconvenient.
Could someone please give me some advice?
I thank you in advance
here the html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<h1 id = "greeting"> Hello </h1>
<body>
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
</body>
</html>
and the css code:
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
you can simply give your navigation bar an "absolute" position and set its top:0
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
top: 0;
position: absolute;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
You need to wrap the navbar and the content (contains H1) with a flex parent:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="flex-grid">
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
<div class="main-content">
<h1 id="greeting">Hello</h1>
</div>
</div>
</body>
</html>
And then apply this CSS to them:
.flex-grid {
display: flex;
}
.main-content {
flex-grow: 1;
}
.main-content h1 {
text-align: center;
}
I am trying to create an extremely simple navbar. I have added bootstrap to my project as well as my own style sheet. I have included only 1 bootstrap class on my page (I think). I have added a custom hover effect but for some reason, I get the hover animation plus another animation playing with the color changing and other stuff.
Here is how the hover is right now:
No Hover
Hover
I want the text to stay white on hover and not have the black underline.
Here is my code:
HTML/EJS
<head>
<meta charset="utf-8">
<title>Madhose</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/styles.css">
<nav>
Madhose
<ul>
<li>Home</li>
<li>Poems</li>
<li>Recipes</li>
<li>Posts</li>
</ul>
</nav>
<body>
<div class="container-fluid">
<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
<h1><%= post.title.substring(0,200) %></h1>
<p><%= post.content.substring(0,200) %>...
Read More</p>
<%}); %>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.footer-padding {
padding-bottom: 60px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
nav {
width: 100%;
position: fixed;
z-index: 2;
display: flex;
align-items: center;
padding: 0;
margin-top: -7px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
width: 100%;
background-color: rgb(0, 120, 255);
height: auto;
display: flex;
justify-content: flex-end;
}
li a {
color: rgb(235, 222, 222);
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 19px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: flex-end;
display: block;
}
li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: rgb(235, 222, 222);
transition: width .3s;
}
li a:hover::after {
width: 100%;
transition: width .3s;
}
.logo {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald';
display: flex;
z-index: 3;
}
.logo:hover{
color:white;
text-decoration: none;
}
h1{
font-family: 'Oswald';
}
Im almost 100% sure this problem is happening from bootstrap but if its anything else please tell me!
Your styling will only override bootstraps if you have your cascading correctly written. If you use a tool like devtools in chrome and inspect the CSS of an element, you can see that there are multiple levels of CSS targeting an element, but not all are actively applied, as some are overwritten. Your styles may not take precedence if their cascading value does not come out to equal more than Bootstrap's value.
As such, if you want to override the values more consistently, use psuedo-namesapacing:
nav#topNavigation ul li a {}
nav#topNavigation ul li a:hover {}
By adding a unique ID to the element, we are increasing the cascade value for this selector, and our css is applied rather than Bootstrap's.
Okay, here it goes:
I am creating my first website. Immediately come across a problem which seems difficult to overcome.
I want to center my image between the header and footer which will stay centered vertically and horizontally, regardless of screen size.
I've seen examples using flexbox where you can center text and whatnot in the middle of the target area. Seems like its useful. I tried it but maybe i haven't applied it correctly.
My code so far
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: grey;
font-family: 'Alegreya', sans-serif;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.banner {
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.banner-inner {
max-width: 60%;
margin: 0 auto;
}
header {
width: 100%;
height: 80px;
display: block;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
/*--- START NAVIGATION --*/
nav {
float: right;
/* Top, Right, Bottom, Left */
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
font-weight: bold;
}
nav ul li a {
color: grey;
text-decoration: none;
font-weight: bolder;
}
nav ul li a:hover {
color: lightgrey;
}
.current {
color: black;
}
/* --- MUSIC PAGE --*/
.music-wrapper {
width: 100%;
text-align: center;
}
.album-list figure {
display: inline-block;
margin: 10%;
}
.album-list figcaption {
text-align: center;
font-size: 150%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: bold;
margin: 2%;
}
.album-list a {
text-decoration: none;
}
/* --- SOCIAL AND FOOTER --*/
footer {
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 200%;
margin: 0.5%;
padding: 0.5% 4% 0.5% 4%;
color: grey;
}
.social i:hover {
color: lightgrey;
}
footer.second {
max-height: 100px;
position: fixed;
bottom: 0px;
z-index: 10;
background: white;
border-top: 1px solid grey;
}
footer.second p {
padding-bottom: 5px;
text-align: center;
color: grey;
font-weight: bold;
}
/*---- MEDIA QUERIES---- */
#media screen and (max-width: 760px) {
header {
position: absolute;
}
#logo {
margin: 15px 0 20px -25px;
background: url(img/SA_mobile.png) no-repeat center;
}
.banner {
padding-top: 150px;
}
#menu-icon {
display: inline-block;
color: #000000;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
border: 2px solid #000000;
border-radius: 5px 0 5px 5px;
width: 50%;
}
nav:hover ul {
display: block;
background: #FFF;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.social i {
font-size: 150%;
padding: 2% 4% 2% 4%;
}
/*--- MUSIC PAGE --*/
.music-wrapper {
padding-top: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Content fits mobile screens-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<title>SPAZ Attack</title>
</head>
<body>
<header>
<div class="header-inner">
<nav>
<!--- Icon For Moblie Version -->
<ul>
<li>Home</li>
<!--- Albums/Videos/Audio -->
<li>Music</li>
<!--- Calander gig dates/book us -->
<li>Gigs</li>
<!--- About the band -->
<li>Bio</li>
<!--- Merchandise -->
<li>Merch</li>
<!--- Contact Info -->
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- END HEADER -->
<section class="banner">
<div class="banner-inner">
<img src="img/spazAttackLogoSmaller1.png">
</div>
</section>
<!-- END BANNER -->
<!--- END FOOTER -->
<footer class="second">
<div>
<ul class="social">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-bandcamp"></i></li>
<!-- Don't Have YET
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
-->
</ul>
</div>
<p>© SPAZ Attack</p>
</footer>
<!--- END SOCKET -->
</body>
</html>
Checkout this fiddle: https://jsfiddle.net/8cyjc9qw/
.mid {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
I have used some other examples to demonstrate how it would look. I have used vh for header and footer and assign the remaining height to main content section and use flexbox to center the image. Hope this helps.
I'm a newbie and I'm making my portfolio for practice, and decided I want to make it fully reponsive and use flexbox as much as possible.
I'm using a "mobile-first" approach, so I can fix any ugliness for desktop later.
My top navigation bar splits my buttons on mobile view. For example, the "About Me" button is in two lines, and the "me" part overlaps with the "about". I want them all to fit in one line, or two split over two lines, but neatly and without overlapping or cutting off text.
Here's my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
}
.nav-container {
display: flex;
}
nav {
display: flex;
font-family: "Lato", sans-serif;
flex-wrap: wrap;
position: fixed;
}
nav ul {
display: flex;
margin: 5px;
padding: 10px;
list-style-type: none;
justify-content: space-around;
width: 100%;
}
nav ul li {
margin: 5px;
padding: 5px;
}
.header-container {
}
header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 100px;
}
.headings {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
}
.cv-container {
display: flex;
align-self: flex-end;
margin-left: 30px;
position: relative;
top: 30px;
right: 30px;
color: #000;
border: 1px solid #000;
}
.cv-container a,
.nav-container a {
text-decoration: none;
color: #000;
padding: 5px;
}
.cv-container a:hover,
.nav-container a:hover {
background-color: #f442aa;
}
strong {
font-style: bold;
}
header h1 {
display: flex;
align-self: center;
font-family: "Lato", sans-serif;
padding: 15px;
}
header h2 {
display: flex;
align-self: center;
font-family: "Playfair Display", serif;
padding: 15px;
}
header a {
font-family: "Lato", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>My Name - Web Designer & Developer</title>
<link rel="stylesheet" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Playfair+Display:400,400i,700,700i" rel="stylesheet">
</head>
<body>
<div class="nav-container">
<nav>
<ul>
<li>About Me</li>
<li>Portfolio</li>
<li>Links</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<header>
<div class="headings">
<p><h1>Virginia Balseiro</h1></p>
<p><h2>Web Designer & Developer</h2></p>
</div>
<div class="cv-container">
<strong>DOWNLOAD CV</strong>
</div>
<div class="social-container">
<a></a>
<a></a>
<a></a>
</div>
</header>
I found some "hacks" online, but I really want to do it the proper way and understand what I'm doing. Thank you so much in advance.
I am suggesting you to use flex-wrap: wrap, on your "ul" tag.
Flex wrap allows wrapping items into multiple lines.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto