I'm working on a website for practice and I'm having an issue where my nav bar is hanging over the header. I've tried adjusting the margin and that isn't working. I've tried changing the display and position, which end up just breaking the layout. My main goal is to have the navigation cleanly nestled in the bottom right of the header, but I'm not sure how to fix it. Here is the code I've typed:
Place the code into code snippets.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
position: relative;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
The simplest solution is to replace your .nav class with:
.nav {
bottom: 0;
right: 0;
position: absolute;
}
I assume this is more or less what you were trying to achieve with your margins.
An absolutely positioned element will be placed relative to the nearest positioned parent element (i.e. one with relative, absolute, fixed or sticky position). By default that is the highest level block, but since your header has position: fixed it is placed relative to that. The bottom and right values indicate the amount of offset from that block's respective edges.
The height of the header is 200px, but you left margin-top: 175px for the nav. For the nav to start where the header is ending, you need at least 200px as margin-top.
Please run the code snippet to check if this is the desired change. I have changed the position from relative to absolute and added bottom: 0 and right: 0 for class .nav.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
bottom: 0;
right: 0;
position: absolute;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
There might be other ways, but using flex layout will solve your problem. 1st add display:flex in your header.
Then .nav with the following:
{
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
See the final result:
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
display: flex;
}
.nav {
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
More details on how flex works, see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Related
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I have the layout as below:
https://imgur.com/r1l0cCi
I have added a side section just below the nav bar. I want the side section to be placed in relation to the nav bar but it takes its position in relation to the header. Is there a way I can achieve this?
Here is my html code and css
body {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.header {
border-radius: 25px;
height: 14%;
width: 100%;
}
img.nav-action-image {
width: 14px;
height: auto;
}
nav a {
display: inline;
text-decoration: none;
float: left;
color: #d1e231;
padding: 14px 16px;
border-right: 1px solid #bbb;
}
nav a:hover {
color: #bff000;
}
nav a.active {
display: inline;
background-color: #bab86c;
color: #37412a;
}
.navigation-bar {
position: absolute;
padding: 0;
width: 100%;
margin-top: 5px;
border-radius: 7px;
}
.action-block {
height: 80%;
width: 20%;
margin-top: 40px;
}
<body>
<header class=header>
</header>
<nav class=navigation-bar>
<img class="nav-action-image" src="menu_icon.png" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<br>
<div class="action-block">
hello
</div>
</body>
you can see that in the css, the code for action-block class aligns from the header instead of the nav bar. I want it to align from the nav bar. Is there a way that I can do this?
remove position:absolute from body and nav.
The below css will clear the floating elements inside nav which will give it a height of its content.
nav:after {
content: '';
display: block;
clear: both
}
html,
body {
height: 100%
}
.header {
border-radius: 25px;
height: 14%;
width: 100%;
}
img.nav-action-image {
width: 14px;
height: auto;
}
nav:after {
content: '';
display: block;
clear: both
}
nav a {
display: inline;
text-decoration: none;
float: left;
color: #d1e231;
padding: 14px 16px;
border-right: 1px solid #bbb;
}
nav a:hover {
color: #bff000;
}
nav a.active {
display: inline;
background-color: #bab86c;
color: #37412a;
}
.navigation-bar {
padding: 0;
width: 100%;
margin-top: 5px;
border-radius: 7px;
background: yellow;
}
.action-block {
height: 80%;
width: 20%;
background: greenyellow;
}
<body>
<header class="header">
</header>
<nav class="navigation-bar">
<img class="nav-action-image" src="menu_icon.png" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<div class="action-block">
hello
</div>
</body>
If using a absolute element relative to another element, then the parent must have position: relative. With this in mind replace your body css with:
html, body {
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
If using floats in the nav (the anchor element), use a clear: both at the end likte this
.navigation-bar {
position: absolute;
display: block;
width: 100%;
margin-top: 5px;
padding: 0;
border-radius: 7px;
}
.navigation-bar::after {
display: block;
clear: both;
content: "";
}
nav a {
float: left;
padding: 14px 16px;
text-decoration: none;
color: #d1e231;
}
nav a:hover {
color: #bff000;
}
nav a.active {
background-color: #bab86c;
color: #37412a;
}
How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
When I put my cursor right on top of the link text, the link is not clickable, but if I put my cursor a little bit below the text, it becomes clickable. I'm learning right now so please explain to me why it's doing that and how to fix it.
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
It's because your <h1> is a block-level element, which will lay over the menu elements. If you give it display: inline-block, it will work as supposed.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
See my example below.
* {
margin: 0;
padding: 0;
}
header {
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1 {
color: white;
position: relative;
left: 100px;
top: 5px;
display: inline-block;
/* Added */
}
nav {
margin-top: -20px;
margin-right: 100px;
}
nav ul {
float: right;
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover {
background-color: #84FFFF;
}
.main {
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop {
width: 1024px;
}
.title {
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3 {
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About
</li>
<li>My Work
</li>
<li>Contact Me
</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
The problem is occurring because of the interaction between some of your styles. You're floating the nav ul element to the right, but you're also setting the nav ul li display to inline-block which is also doing an implicit float (try replacing it with float: left and you'll see the same behavior).
If you set the position:relative on your nav ul, it willforce the elements to float correctly within the ul container.
nav ul{
float: right;
margin: 0;
padding: 0;
position:relative; /*ADD THIS*/
}
I am stumped on the following. I just added a logo to a site and for some reason, my nav panel links that are to the right of the logo/image are now not clickable. It appears that the image is somehow over-taking them, but I do not see how. In the console/inspect it doesn't show the image over-taking them?
Does anyone see why this is happening?
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
I don't understood whay you have give position:absolute to logo but, add z-index: -1; to .logo will make your link clickable..
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
z-index: -1;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
Edit:
Other solution is give display: block; to .logo a will work. Fiddle
The image is not overtaking them but the <div> the image is sitting in is. It's full width so you have a transparent div sitting on top of your navbar. Limit the width of your logo container, use a span instead or float it as suggestions.
Check that the z-index of the image is below the z-index of the links.
You don't really need to use position: absolute;. Instead use display:inline or inline-block and avoid overlapping.
You CSS would look like this:
.nav-list {
display:inline; /* Add this */
margin: 0;
/* width:100%; you can remove this */
list-style: none;
text-align: right;
padding: 0;
}
.logo {
display:inline; /* add this*/
margin-top: -15px;
cursor: pointer;
/* z-index: -1; no need for z-index */
}
JsFiddle