I have a navbar that looks like this:
but when i added position: fixed on the header, the width changed and become like this:
Here is my index.html
<header>
<div class="logo-container">
<img src="https://i.ya-webdesign.com/images/rocket-logo-png-4.png" alt="logo" class="logo">
<h4>Rockode</h4>
</div>
<nav>
<ul class="nav-links">
<li class="nav-link active">Beranda</li>
<li class="nav-link">Produk</li>
<li class="nav-link">Pengembang</li>
<li class="nav-link">Kontak</li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-sign-up">Daftar</button>
<button class="btn btn-sign-in">Masuk</button>
</div>
</header>
<main>
<div class="content">
<article>This is article</article>
<article></article>
</div>
<aside></aside>
</main>
and here is style.css
main {
background-color: white;
height: 720px;
z-index: 1;
position: relative;
padding-top: 188px;
}
header {
display: flex;
padding: 30px 10%;
height: 88px;
align-items: center;
justify-content: space-between;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.075);
z-index: 2;
position: fixed;
background: white;
}
Not 100% sure what the problem is, but I just added this and it works fine...
main {
position: relative;
padding-top: 88px
}
header {
position: fixed;
}
See fiddle: https://jsfiddle.net/8ktxzfvL/
That was my bad for didn't notice the width value on header section.
It solved by declaring width: 100%.
Related
I'm trying to make a fixed navbar, but the problem is when I make it fixed, buttons on my page go over the navbar.
I know that when you make an element's position fixed, it goes out of the flow of the page.
But I couldn't find a working solution. I found another question about this, but the answer didn't work. The answer said that margin-top should be added. But it just makes the buttons go down
Here's what I tried:
body {
background-color: rgb(0, 0, 0);
margin: 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 13vh;
background-color: #d6e0e4;
position: fixed;
width: 100%;
}
.contain {
padding-top: 13vh;
}
.packing-d {
background-color: #923a1a;
border: none;
color: white;
padding: 50px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: harlow;
position: absolute;
top: 191%;
left: 30%;
transition: 500ms;
}
<nav>
<div class="logo">
<h4>Me</h4>
</div>
<ul class="navlinks">
<li>Home</li>
<li>About Me</li>
<li>Works</li>
<li>Contact Me</li>
<li>Tr</li>
<li>En</li>
</ul>
</nav>
<div class="contain">
<div>
<img class="first-img" src="SYF1.png" alt="">
</div>
<div id="about">
<img class="second-img" src="barbeküpng.png" alt="">
<div class="topRow" id="works">
<button class="packing-d">Packing Designs</button>
<button class="logo-d">Logo Designs</button>
<button class="poster-d">Poster Works</button>
<button class="model-d">3d Model Works</button>
<button class="video-d">Video Animations</button>
<button class="videoe-d">Video Edit Works</button>
<button class="art-d">Art Works</button>
</div>
</div>
Thanks.
You can make use of the z-index property. The MDN documentation state the following:
The z-index CSS property sets the z-order of a positioned element and
its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
So, by adding the z-index to the nav element should make the trick.
nav {
...
z-index: 2; /* If 2 is not enough, try increasing the number. */
}
body {
background-color: rgb(0, 0, 0);
margin: 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 13vh;
background-color: #d6e0e4;
position: fixed;
width: 100%;
z-index: 2; /* If 2 is not enough, try increasing the number. */
}
.contain {
padding-top: 13vh;
}
.packing-d {
background-color: #923a1a;
border: none;
color: white;
padding: 50px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: harlow;
position: absolute;
top: 191%;
left: 30%;
transition: 500ms;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Me</h4>
</div>
<ul class="navlinks">
<li>Home</li>
<li>About Me</li>
<li>Works</li>
<li>Contact Me</li>
<li>Tr</li>
<li>En</li>
</ul>
</nav>
<div class="contain">
<div>
<img class="first-img" src="SYF1.png" alt="">
</div>
<div id="about">
<img class="second-img" src="barbeküpng.png" alt="">
<div class="topRow" id="works">
<button class="packing-d">Packing Designs</button>
<button class="logo-d">Logo Designs</button>
<button class="poster-d">Poster Works</button>
<button class="model-d">3d Model Works</button>
<button class="video-d">Video Animations</button>
<button class="videoe-d">Video Edit Works</button>
<button class="art-d">Art Works</button>
</div>
</div>
</body>
</html>
nav {
...
z-index: 99;
}
Should fix it.
Use sticky positioning with a top 0 value. This will work as you wanted without hacks.
body {
background-color: rgb(0, 0, 0);
margin: 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 13vh;
background-color: #d6e0e4;
position: sticky;
top: 0;
width: 100%;
}
.contain{
min-height: 1500px;
}
.packing-d {
background-color: #923a1a;
border: none;
color: white;
padding: 50px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: harlow;
top: 191%;
left: 30%;
transition: 500ms;
}
<nav>
<div class="logo">
<h4>Me</h4>
</div>
<ul class="navlinks">
<li>Home</li>
<li>About Me</li>
<li>Works</li>
<li>Contact Me</li>
<li>Tr</li>
<li>En</li>
</ul>
</nav>
<div class="contain">
<div>
<img class="first-img" src="SYF1.png" alt="">
</div>
<div id="about">
<img class="second-img" src="barbeküpng.png" alt="">
<div class="topRow" id="works">
<button class="packing-d">Packing Designs</button>
<button class="logo-d">Logo Designs</button>
<button class="poster-d">Poster Works</button>
<button class="model-d">3d Model Works</button>
<button class="video-d">Video Animations</button>
<button class="videoe-d">Video Edit Works</button>
<button class="art-d">Art Works</button>
</div>
</div>
Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I am having trouble trying to set my footer to full width. I think its something with the columns but I'm not sure how to fix this. How do I fill the left and right ends of my footer?
html:
<footer class="container">
<div class="row">
<div class="copyrightText">
<p class="col-sm-4"><a href='../credit/index.html'>© Justin Sanchez</a></p>
<ul class="col-sm-8">
<li class="col-sm-1">
<a href="https://www.instagram.com/anothernameforbox/">
<img src="img/instalogo.png" type="button"></li></a>
<li class="col-sm-1">
<a href="https://linkedin.com/in/justin-emmanuel-o-sanchez/">
<img src="img/linklogo.png"></li></a>
<li class="col-sm-1">
<a href="https://github.com/anothernameforbox">
<img src="img/gitlogo.png"></li></a>
<li class="col-sm-1">
<a href="mailto:sanchezjustin6039#gmail.com">
<img src="img/mailicon.png"></li></a>
</ul>
</div>
</footer>
CSS:
/footer/
footer {
display: block;
padding: 20px 0;
font-size: 12px;
width: 100%;
background-color: Azure;
background-size: auto;
}
footer p {
font-size: 15px;
}
footer .col-lg-12 {
display: inline-flex;
justify-content: flex-end;
}
footer ul {
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
The reason is you use .container class for the footer. Use .container-fluid for a full width container, spanning the entire width of your viewport.
1) use class .container-fluid instead of class .container.
OR
2) Change style for class .container like this:
.container {
margin: 0;
width: 100%;
}
Demo
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
.footer {
width: 100%;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
}
As you can see my footer does not stick to the bottom. I have the same exact code for other pages and it worked but for this page it does not. Can someone tell me what is wrong? I want it to be at the end of the page.
You can achieve that with positioning. Make the footer position: fixed; and give it bottom: 0; so it will stick to the bottom of the viewport:
.footer {
width: 100%;
height: 200px;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
position: fixed;
bottom: 0;
}
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
Edit
If you want your footer to be on the bottom of your page rather than on the bottom of the viewport, just remove the position: fixed; give the element above the footer a min-width of 100% minus the height of the footer, e.g.:
min-height: calc(100% - 200px);
When you are first having a <html> that may not fill the window's height, and neither the <body> element, also the .container element... if you want to have a sticky footer, you could try
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
}
body {
padding-bottom: 100px;
}
Edit 1 -
There are 2 ways to not use the fixed position, the first one is using the calc function of CSS:
html, body { min-height: 100vh; }
nav { min-height: 10vh; height: auto; }
footer { min-height: 100px; height: 100px; }
main { min-height: calc(90vh - 100px); }
The other way ia using <table>, <tr> and <td> or display: table, display: table-row and display: table-cell with min-height CSS property.
You may want to look at my answer of this question for more info: Sticky footer that extends when at website-bottom and scrolling further
Edit 2 -
I found that this could be done via the display: flex; easily.
body {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
min-height: 100vh;
}
header { height: 100px; }
content { flex-grow: 1; }
footer { height: 100px; }
Try on: https://jsfiddle.net/89ucrec5/6/
I found a decent solution to this a few months ago... You have to wrap your page content and footer into separate wrappers and do a little bit of CSS magic with :after to get it right.
html:
<html>
<body>
<div class="content-wrapper">
my content
</div>
<div class="footer-wrapper">
my footer
</div>
</body>
</html>
css:
html, body {
height: 100%;
}
.content-wrapper {
min-height: 100%;
margin-botton: -100px; //set to anything as long as it matches footer-wrapper height
}
.content-wrapper:after {
content: "";
display: block;
}
.footer-wrapper, .content-wrapper:after {
height: 100px;
}
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
}
You will need to make proper padding from main content
Another way is setting flex container so your content would take all remaining space
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
content {
flex-grow: 1;
}
I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.