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;
}
Related
I have created an #apdiv tag with styling as follows:
#ApDiv
{
position: fixed;
background-color: rgba(255, 255, 255, .9);
float: left;
width: 1200px;
height: 200px;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
overflow-y:scroll;
overflow-x: hidden;
z-index: +5;
}
I have 2 nav bars that are held within this fixed position #apdiv tag to get my page content to scroll under the div. The scrolling part works fine, but my dropdown menu in the second nav bar is not visible over the top of the <div id="apdiv"></div>.
Is there a way that I can get the dropdown menu to extend out over the fixed div I have created?
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.
I have been toying with the different templates at Weebly and trying to find one fixed nav bar that I can add social links at the top to, but I can't seem to work with any. The social links tend to be out of place.
I have decided to use a current template, but need to fix the current header portion. I have tried adding position: fixed to a few areas of the CSS, but it turned out horrendous. The background can be seen along with the scrolling.
apply this to #header-wrap
position: fixed;
top: 0;
z-index: 1;
background: #FFF; //if you want a background on the fixed header.
You now have the border on the #page-wrap so if you want to keep that give this div a margin-top.
If you want the border on the fixed header, put it there.
Styling for you nav:
#nav-wrap {
position: fixed;
top: 47px;
z-index: 2;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
padding-bottom: 10px;
margin-bottom: 10px;
background: url(theme/saperator.png?1418308200) no-repeat bottom left;
z-index: 2;
background: #FFF;
}
http://jsfiddle.net/ft44wLym/
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.
I've given my navbar a fixed position and a z-index of 1. It stays at the top when I scroll which is good, but then my logo doesn't go behind it as it scrolls up, it can still be seen in the nav area which I really don't want. Below is the css for my Logo. I'm still learning web design. Thanks.
#logo {
background-color: #292421;
color: white;
margin-top: 70px;
padding: 40px 0 25px;
}
#nav_bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: url(..images/header-fade.gif) repeat-x;
border-bottom: 1px solid #ccc;
}
Your #nav_bar has no background. The URL you provided is incorrect. You probably wanted it to be
background: url(../images/header-fade.gif) repeat-x;
Notice that you missed slash character / after the dots ..