I made a fixed navbar and then a header that I used relative position to place it below the fixed navbar. But when I scroll up the header shows over the navbar.
<section class="nav-bar">
<ul>
<li class="nav-left">LOGO</li>
<li class="nav-right">FACEBOOK</li>
<li class="nav-right">GITHUB</li>
<li class="nav-right">TREEHOUSE</li>
</ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>
h1 {
position: relative;
top:2em;
}
.nav-bar{
background-color: blue;
width:100%;
position:fixed;
margin-top:-1.25em;
margin-left:-.55em;
padding-bottom:1em;
}
Any advice on how to keep the header behind the navbar? I'm sure it has something to do with the fixed and relative positioning but haven't found anything on how to remedy this.
Hanif is right, adding z-index to .nav-bar achieves the effect you desire.
h1 {
position: relative;
top:2em;
}
.nav-bar{
background-color: blue;
width:100%;
position:fixed;
margin-top:-1.25em;
margin-left:-.55em;
padding-bottom:1em;
z-index: 99;
}
<section class="nav-bar">
<ul>
<li class="nav-left">LOGO</li>
<li class="nav-right">FACEBOOK</li>
<li class="nav-right">GITHUB</li>
<li class="nav-right">TREEHOUSE</li>
</ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>
Related
Background: The current design that I am working on, requires a logo followed by menu in one line. What I want is that the logo and the menu (which consist of two parts which are two unordered list here) to appear in one row or as one section.
Parts of the header: The header consist of Logo Image, menu left and menu right. The menu left and menu right are unordered list items in code.
Problem faced: I am trying to add the logo image and menus in one div element to bring them together in one line. But the image is appearing on top and followed by the menu element. I have tried using the display:inline to bring the logo image on one side and menu starting after the logo image but it didnot work.I am sharing my code. Can the image be positioned and aligned along with the menu items without using position absolute? There is only HTML5 and CSS3 in the code. There is no javascript in the code.
.header{
position:relative;
margin:0;
padding:0;
}
.top{
height:20%;
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
.element{
clear:both;
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li>Buy</li>
<li>Rent</li>
<li>Sell</li>
<li>Mortgages</li>
<li>Agent finder</li>
<li>More</li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li>List your rental</li>
<li>Advertise</li>
<li>Sign in</li>
<li>Join</li>
<li>Help</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Explanation in comments of CSS where the changes are made.
Give height to header
Making height of top to 100% as it to cover the whole header height can be adjusted accordingly.
Properties to be added to div with class log
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.header{
position:relative;
margin:0;
padding:0;
height:30vh;/*giving height to header*/
}
.top{
height:100%;/*making it to cover complete header*/
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
/* properties to be added to log div*/
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.element{
/*removing the clear property*/
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li>Buy</li>
<li>Rent</li>
<li>Sell</li>
<li>Mortgages</li>
<li>Agent finder</li>
<li>More</li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li>List your rental</li>
<li>Advertise</li>
<li>Sign in</li>
<li>Join</li>
<li>Help</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I am trying to build a header similar to this one: http://themes.tf/preview/?momentum
I've set a height but the div still won't get displayed and the content slips to the top.
How can I fix this?
The css is:
.header {
position:relative;
display:block;
width:100%;
z-index:1;
height:688px;
}
.bg-img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
This is the html:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
Here you can see the live version: http://suitsncats.de/index_copy.html
If you go to the index page you can see my previous attempt that worked but had a static header image.
I've looked into the source on your website and encountered two issues:
You've used an id selector (#header) instead of class selector (.header) in your style_copy.css and there's also a syntax error in it (no ; after the height declaration)
#header {
position:relative;
top:0px;
left:0;
height:668px
z-index:1;
}
/* should become: */
.header {
position:relative;
top:0px;
left:0;
height:668px; /* <--- note ; */
z-index:1;
}
In your live version, I've checked out your CSS file style_copy.css and noticed that you tell the CSS to look for #header even though in the HTML you're using .header.
You also forget the ; after the height declaration.
Solution:
Change this in the live version's CSS:
#header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
To this:
.header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
Hope this helps!
Hi I looked into your source at live website, try following solution:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
and CSS:
.header {
position: static;
height: 100px;
width: 100%;
background-color: red;
}
nav {
width: 50%;
height: 30px;
margin: auto;
display: table;
z-index: 2;
text-transform: uppercase;
}
Not exactly how you wanted, but one step closer.
Hello I'm currently working on a website where I want the logo of the business to overlap into the content.
Similar to this website: http://www.menzies.com.au/
I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach
Example Code of what i've tried
<div class="container">
<ul class="nav nav-pills">
<img src="logo.jpg" style="float: left; z-index: 3;">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Home</li>
</ul>
<img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>
What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary
Could anyone with experience in doing this point me in the right direction?
Basically what you need do is set the logo position to absolute, then it will be over the other elements. I did a example to you, look at this HTML:
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
The menu div has 75px of height, but his child can have more than this, and if they do, a overflow will occur, that is what you wanna. If it doesn't occur, as I said, you can try set the position to absolute. So, you set the logo div to something like 130px of height, and the nav to 100% height. I changed the height of logo to 130px, but it doesn't affect the other menu child. So, the nav height will be the menu height: 75px. Complete code:
#menu {
width:100%;
height:75px;
background-color:#333;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
}
.logo {
width:150px;
height:130px;
background-image:url('http://placehold.it/150x130');
float:left;
position:absolute;
margin-left:25px;
}
nav {
color:#fff;
float:right;
font-size:1.3em;
line-height:75px;
margin-right:10px;
height:100%;
}
nav ul {
margin-top: 0px;
}
nav ul li {
margin-right:10px;
}
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
This problem is very relative, but with a simple CSS like this one, you can contour this.
Element with id logo is positioned with absolute. By default the left and the top position of the element which is set with the position absolute should be 0 and 0 right..? But here some kind of malfunctioning is happening. Can anybody tell me the exact reason of why this is happening..?
Here is what i have,
HTML:
<body>
<div id="header">
<h1>
jackalQuest
</h1>
<ul>
<li>Who the hell is Developer.?</li>
<li>About the site</li>
</ul>
</div>
<div id="logo" >
</div>
</body>
CSS:
#logo {
position:absolute;
width:100%;
height:100%;
background-color:red;
}
DEMO
#logo {
position:absolute;
width:100%;
height:100%;
background-color:red;
top: 0px;
left: 0px;
}
CSS:
ul#menu-ediloc li
{
float:left;
padding-left:5px;
position:relative;
}
ul#menu-ediloc ul
{
z-index:500;
position:absolute;
}
I have a drop menu like this, but when it goes down the sub menu is hidden where it touches the next div with is a slideshow and it's outside the relative parent.
I tryed to put position:relative; to body but although it fixes the visibility problem it than messes up my menu.
Any ideas?
<div id="header">
<ul id="menu-ediloc">
<li>
<ul id="sub-menu">
<li>
</li>
</ul>
</li>
</ul>
</div>
<div id="slider">
</div>
I tryed to put the slider in the header and put relative on header, but its same as on body it messes up my sub-menu.
The only way my sub-menu works if i put the relative on the ul li tag.
add the following css
#header{
position: relative;
z-index: 999;
}