Nathanael
Reputation: 1
fixed header nav links scroll out of the header issue
I'm struggling to find an answer to my question, perhaps I'm not explaining it very well.
I have a fixed header with a navigation in it, here's the HTML;
<header>
<nav>
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="ourpassion.html">OUR PASSION</a></li>
<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
When i scroll down in the body (to see more content) the links themselves scroll out of the viewport whilst the header and its contents remain. In other words, the header visuals (like the link text e.g. HOME, ABOUT, CONTACTS etc.) remain and give the impression of links, but I can no longer hover over them as the tags seem to have disappeared upwards.
I don't understand how to resolve this issue. Amateur programmer here. Attached below is the whole html file for reference.
Much obliged! Nate
<!DOCTYPE html>
<html lamg="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>
<style>
* {
overflow-x: hidden;
margin: 0;
padding: 0;
}
h1 {
font-family: "Bitter", serif;
font-size: 5vw;
}
h2 {
font-family: "Quattrocento Sans", sans-serif;
font-size: 2vw;
}
h3 {
font-family: "Cantarell", sans-serif;
font-size: 1.5vw;
}
header {
position: fixed;
overflow: hidden;
height: 100px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
nav {
text-align: center;
position: relative;
}
ul {
line-height: 100px;
position: relative;
}
li {
position: relative;
display: inline-block;
background-color: rgba(200, 200, 200, 0);
-webkit-transition: width 2s; /*safari */
transition: background-color 0.2s;
}
li:hover {
position: relative;
background-color: rgba(200, 200, 200, 0.8);
}
a {
position: relative;
text-decoration: none;
text-align: center;
font-size: 2vw;
display: block;
padding-left: 2vw;
padding-right: 2vw;
font-family: "Abril Fatface", cursive;
color: rgba(216, 216, 216, 1);
text-shadow: 0px 0px 1px #A0A0A0;
}
body {
background-color: rgba(121, 184, 255, 0.5);
color: white;
background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
}
div.headerspace {
height: 100px;
}
div.mainmedia {
background-image: url("nate pic.jpg");
width: 500px;
height: 500px;
float: right;
}
div.content {
position: absolute;
padding-right: 300px;
padding-left: 100px;
padding-top: 100px;
}
</style>
</head>
<header>
<nav>
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="ourpassion.html">OUR PASSION</a></li>
<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
<body>
<div class="headerspace">
</div>
<div class="mainmedia">
</div>
<div class="content">
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
</div>
</body>Upvotes: 0
Views: 96
Answers (2)
Rahul Kumar
Reputation: 154
Just set the z-index property for the header and make it greater than content's z-index. And, I have added some jQuery code to make the header more visible.
$(document).ready(function(){
$(window).scroll(function(){
var topOffset = $(window).scrollTop();
if(topOffset>130){
$("header").css({"background-color":"rgba(255, 255, 255, 1)"});
}else{
$("header").css({"background-color":"rgba(255, 255, 255, .5)"});
}
});
});* {
overflow-x: hidden;
margin: 0;
padding: 0;
}
h1 {
font-family: "Bitter", serif;
font-size: 5vw;
}
h2 {
font-family: "Quattrocento Sans", sans-serif;
font-size: 2vw;
}
h3 {
font-family: "Cantarell", sans-serif;
font-size: 1.5vw;
}
header {
position: fixed;
overflow: hidden;
height: 100px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index:999;
}
nav {
text-align: center;
position: relative;
}
ul {
line-height: 100px;
position: relative;
}
li {
position: relative;
display: inline-block;
background-color: rgba(200, 200, 200, 0);
-webkit-transition: width 2s; /*safari */
transition: background-color 0.2s;
}
li:hover {
position: relative;
background-color: rgba(200, 200, 200, 0.8);
}
a {
position: relative;
text-decoration: none;
text-align: center;
font-size: 2vw;
display: block;
padding-left: 2vw;
padding-right: 2vw;
font-family: "Abril Fatface", cursive;
color: rgba(216, 216, 216, 1);
text-shadow: 0px 0px 1px #A0A0A0;
}
body {
background-color: rgba(121, 184, 255, 0.5);
color: white;
background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
}
div.headerspace {
height: 100px;
}
div.mainmedia {
background-image: url("nate pic.jpg");
width: 500px;
height: 500px;
float: right;
}
div.content {
position: absolute;
padding-right: 300px;
padding-left: 100px;
padding-top: 100px;
z-index:500;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>
<header>
<nav>
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="ourpassion.html">OUR PASSION</a></li>
<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
<div class="headerspace">
</div>
<div class="mainmedia">
</div>
<div class="content">
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
</div>Upvotes: 0
orlland
Reputation: 1266
You need to set z-index for the header.
<!DOCTYPE html>
<html lamg="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Bitter|Abril+Fatface|Quattrocento+Sans|Cantarell' rel='stylesheet' type='text/css'>
<style>
* {
overflow-x: hidden;
margin: 0;
padding: 0;
}
h1 {
font-family: "Bitter", serif;
font-size: 5vw;
}
h2 {
font-family: "Quattrocento Sans", sans-serif;
font-size: 2vw;
}
h3 {
font-family: "Cantarell", sans-serif;
font-size: 1.5vw;
}
header {
position: fixed;
z-index: 1;
overflow: hidden;
height: 100px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
nav {
text-align: center;
position: relative;
}
ul {
line-height: 100px;
position: relative;
}
li {
position: relative;
display: inline-block;
background-color: rgba(200, 200, 200, 0);
-webkit-transition: width 2s; /*safari */
transition: background-color 0.2s;
}
li:hover {
position: relative;
background-color: rgba(200, 200, 200, 0.8);
}
a {
position: relative;
text-decoration: none;
text-align: center;
font-size: 2vw;
display: block;
padding-left: 2vw;
padding-right: 2vw;
font-family: "Abril Fatface", cursive;
color: rgba(216, 216, 216, 1);
text-shadow: 0px 0px 1px #A0A0A0;
}
body {
background-color: rgba(121, 184, 255, 0.5);
color: white;
background-image: url(http://wallpaperspal.com/wp-content/uploads/Blue-Gradient-Abstract-Wallpaper.jpg);
}
div.headerspace {
height: 100px;
}
div.mainmedia {
background-image: url("nate pic.jpg");
width: 500px;
height: 500px;
float: right;
}
div.content {
position: absolute;
padding-right: 300px;
padding-left: 100px;
padding-top: 100px;
}
</style>
</head>
<header>
<nav>
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="ourpassion.html">OUR PASSION</a></li>
<li><a HREF="whatwedo.html">WHAT WE DO</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
<body>
<div class="headerspace">
</div>
<div class="mainmedia">
</div>
<div class="content">
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
<h1>Nat and Abs</h1>
<h2>A.K.A Nabs</h2>
<h3>Nate and Abs got hitched on the 18th April 2015 and since the honeymoon have been pursuing creativity like it's going out of business! Abs is a professional actor, studied at UWTSD in Carmarthenshire and Nate has trained as a Sound & Lighting engineer. Abs enjoys creative writing and Nate enjoys writing and singing his own songs. They are both extremely passionate people; give them the opportunity and they'll get passionate about something!</h3>
</div>
</body>Upvotes: 2
Related Questions
- How to stop web page header scrolling off screen when a nav link is selected
- CSS: How to prevent anchor links from scrolling behind fixed header?
- Issue with fixed positioned header and href
- Navbar to scroll then remain fixed under a fixed header. ISSUES
- Navigation bar follows scroll when fixed
- CSS navigation bar fixed, can't scroll
- Fixed header influences anchors
- Fixed header still disappears when webpage is scrolled
- Issue with fixed header - no horizontal scroll
- Fixed header inside scrolling block