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.
Related
I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
I created a navigation bar with a first and second level navigation. You can see the latest version here as a JSFiddle (maybe you have to increase the width of the frame containing the output to see the navigation bar with two levels).
At the moment, I have several issues with this navigation bar:
The width of the first level element "Menu1" should only be the width which it will need and not the width of the total width of the elements inside the second level navigation.
The second level navigation should be width 100% so the same as the yellow header and not only the width of the elements of the second level navigation bar.
So the navigation bar should look like the following image:
But how can this be achieved, especially the width of 100% of the second level navigation bar? I tried this CSS-Tricks: Full Browser Width Bars with "Using pseudo elements", because I did not want to have this definition globally on
html, body {
overflow-x: hidden;
}
Any help is highly appreciated!
Is this what you want http://jsfiddle.net/aytaxykf/5/
i added this ontop of your styling. so you can probably remove some of the rules you have there
.top-bar {
position: relative;
}
.top-bar-section {
height: 70px;
}
ul.sub-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: blue;
text-align:center;
}
ul.sub-menu li{
display: inline-block;
float: none;
}
.menu-center a {
position: relative;
}
.menu-center .active > a:before {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -10px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent lime transparent;
}
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 ..
So I have started to mess around with responsive html. But anyways, that's not really the issue. The issue is after i added this parallelogram shape, it messed up the contents of my wrapper. I tried using z-index to make it so the nav bar appears over the wrapper, but then It didn't work when I set my wrapper to relative, it worked when i set it to absolute/fixed and z-index -1. I'm just trying to get my wrapper to be aligned in the center while having the parallelogram shape in the nav bar. Because right now, my 2 column layout is being messed up because of the shape.(I suck at explaining, but if you look at my site on jsfiddle, I think you can get the idea) Thanks!
http://jsfiddle.net/RgKaQ/
heres something I've tried
nav {
height: 40px;
width: 100%;
background: #33FF00;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #339900;
z-index : 1;
}
.wrapper {
width: 800px;
margin: 0 auto;
/* position: relative; doesn't work*/
position: fixed; /*works but it makes it not aligned in the center*/
z-index: -1;
}
The id #swank (which is taller than the nav) is causing the problems. Use position:absolute; for the nav and add margin to .wrapper. Like this. http://jsfiddle.net/RgKaQ/4/
nav {
position:absolute;
top: 0;
}
.wrapper {
margin: 40px auto 0 auto;
overflow:auto;
}
Try to use the position this absolute if you want to chage the css for nav bar make hte changes in nav bar css not in wrapper ..
.wrapper {
width: 800px;
margin: 0 auto;
/* position: relative; doesn't work*/
/* position: fixed; works but it makes it not aligned in the center*/
position:absolute;
z-index: -1;
}
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;
}