http://codepen.io/clcole345/pen/OPLGeb
The site I'm working uses pure CSS parallax scrolling. I have a nav bar across the top that has a height of 42px. I'm trying to keep the nav bar at the top, while the links in the nav bar are links to anchor within the page.
Before adding the links, the nav bar does stay in place; after a link is clicked, the page goes to the location, but the nav bar disappears behind the other divs.
I found this code:
/* Keeps nav visible while using anchor links within page------------*/
.calculated-height {
height: -moz-calc(100vh - 42px);
height: -webkit-calc(100vh - 42px);
height: calc(100vh - 42px);
}
It didn't change anything.
I've coded my links as such:
<section name="home" id="home" data-type="background" data-speed="10">...</section>
And this is the rest of the css associated with the anything in nav divs:
#headerNav {
height: 42px;
width: 100%;
}
#nav {
width: 35%;
float: right;
}
#logo img {
width: 42px;
height: 42px;
float: left;
}
#nameTitle {
width: 25%;
float: left;
background-color:#3CC;
line-height: 42px;
text-align: center;
}
#nav li {
display: inline;
line-height: 42px;
margin-left: 25px;
}
I've also recently noticed that when I refresh the page (f5 & only after clicking a link from the nav bar), the nav bar stays behind the other divs. I just want my nav to stay at the top and visible..
Any help is appreciated, thanks!
The answer was so simple--definitely shouldn't have taken so long for me to figure this out.
I just added to the:
header {
z-index: 5000;
position: fixed;
top: 0:
}
pBody {
z-index: -5000;
}
However, this does cause the nav bar to cover the scroll bar on the side--not a big deal since it's mostly working.
No matter, I'm headed to Google to see if I can find some answers there. But, if someone does have any insight on how to keep the nav bar from covering the scroll bar, I all ears.
Related
I could use some help solving this css problem. Basically, I have 3 sections.
div class="app-container">
<div class="menu">
</div>
<div class="content">
</div>
</div
The menu div, should contain my menu. It should be displayed on the left side with a fixed width. The height should also be 100%.
The content div, should use what's rest of the width available.
This is how my site looks like now.
The problem happens when there it more content to the right, and you have to scroll down to view it. When this happens, my menu does not follow along.
This is how it looks when there are way more content. (you can see to the right that I have scrolled down)
Code
html, body {
}
.app-container {
}
.menu {
height: 100%;
width: 16rem;
top: 0;
left: 0;
background-color: #2D3E50;
color: white;
padding: 1rem;
position: absolute;
}
.content {
padding: 1rem;
padding-left: 17rem;
background-color: white;
height: 100%;
}
As you can see, I have made a padding-left on the content, and filled in the menu in the absolute position.
What should I do so the menu keeps continuing no matter how far you scroll down?
Update
Try using position: relative; to body and position: absolute; to your menu element. Set height of the menu to 100%.
Code of navigation bar
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
list-style-type: none;
background: black;
margin: 0;
padding: 0;
}
li {
float: left;
padding: 25px 25px;
cursor: pointer;
}
a {
text-decoration: none;
color: white;
font-size: large;
}
and code of image
.image {
position: relative;
left: 500px;
overflow: hidden;
So when I scroll text smoothly hides behind navigation bar. but the enter image description hereimage overlaps the navigation bar
right now on my right the div of 'similar questions' is also overlapping the bottom black div
You should set a z-index to your ul and make sure it is higher than what the other elements have.
You will need to add a z-index to the main navigation higher than the content scrolling. As mentioned.
But also you using position: relativeon the image, if you also set its parents position to relative as well thi sway the image will stay within the main contents wrapper, and scroll beneath the menu with the rest of the content.
Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David
One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.
One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.
You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.
recently I have tried to achieve a navigation bar that has two sides, one on the right and one of the left, they are separated (not same div). I have managed to get the two navigation bars to work but my problem is that when the browser window is smaller then the wrapper (1000px) the right side of the navigation bar will not stick to the right side instead it will be somewhere in the center.
My code until now
css
div.wrapper
{
min-width: 1000px;
}
div.menul
{
float: left;
width: 880px;
padding: 15px;
background-color: red;
}
div.menur
{
position: absolute;
right: 0;
z-index: 999;
width: 250px;
padding: 15px;
background-color: yellow;
}
html
<div class="wrapper">
<div class="menul">
menu
</div>
<div class="menur">
menu
</div>
</div>
help would be appreciated, thank you
Simply add position: relative to the #wrapper CSS. This will cause the right menu to be positioned relative to the #wrapper rather than the page itself
[Example]
How can I get the menu bar like on this page http://eddieringle.com/ at the top of the page. A menu bar that would move along when I scroll down the page. The black bar.
Its not moving, it just a div fixed into place. From the site in question.
#topbar {
left: 0;
position: fixed;
float: left;
width: 100%;
background: url(../images/topbar-bg.png) repeat-x 50% 100%;
z-index: 900;
padding: 5px 0 19px;
}