I've tried almost every different combination of positions on my elements. I have only been web coding for around a month and a half so I'm sure its something super obvious but I can't get the fixed nav-bar to appear in front of the background Images. Especially with the #toggle:checked when it pops down for mobile, the nav links aren't visible since they are behind the images. here is my codepen for the project
.nav{
background: rgba(48, 48, 48, 0.738);
border-bottom: 1px solid black;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
width: 100%;
z-index: 10000;
}
.menu{
margin: 0 30px 0 0;
z-index: 10000;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
https://codepen.io/gogocodesmedia/full/mobJZP
Please help!
Related
I'm puzzled! The green menu is stacked behind the white header with search field. This is needed to display the page correctly, but now the green menus links become unclickable.
The white header is position: fixed;. The green menu is not fixed but has z-index -1 because apparently this is the only way to stack it behind the white header.
How do I make the links clickable?
Edit:
I tried z-index: 99; aswell as z-index: -99; for both elements. Literally the only way to stack the green menu behind the white header is to use a negative z-index number for the green menu.
Edit 2:
I also tried using opacity: .99; for the white header but no results.
.header {
margin: 32px 0 0 0;
padding: 0;
width: 100%;
height: 75px;
background-color: rgba(255,255,255,0.75);
border-top: 2px solid rgba(55,175,75,1.00);
border-bottom: 5px solid rgba(55,175,75,1.00);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
position: fixed;
z-index: 1;
}
#menu {
position: fixed;
margin-top: 107px;
min-height: 40px;
width: 100%;
background-color: rgba(55,175,75,1.00);
border: 1px solid rgba(55,175,75,1.00);
border-radius: 0;
z-index: -1;
}
Set z-index for .header as 2 and for #menu as 1
Recently I fixed my dropdown menu which used to drop with all the other un-hovered buttons also changing their positions. The current issue I just noticed accidentally. When the page is all scrolled up, i.e. I am at starting position, dropdown works as expected. But if I scroll a little bit down, and then hover over button, the dropdown appears where it was before but I am expecting it to appear below the button. This is the snap of code I am using:
.tut_navi_buttons .drop_down_navi_content {
display: none;
right: 0;
position: unset;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
height: 0px;
transition: height 1s ease;
}
.tut_navi_buttons:hover .drop_down_navi_content {
position: fixed;
display: block;
height: auto;
/*height: auto;*/
/*box-shadow: 0px 2px 1px grey;*/
}
#tut_navi {
overflow: hidden;
padding-top: 10px;
float: left;
padding-left: 5px;
/*display: inline-block;*/
}
.tut_navi_buttons .drop_down_navi {
overflow: hidden;
border: none;
outline: none;
color: black;
background-color: inherit;
}
.tut_navi_buttons {
width: auto;
height: 20px;
margin: 10px;
/*margin-bottom: 20px;*/
/*padding: 5px;*/
position: relative;
display: inline-block;
}
<div id='tut_navi'>
<div class="tut_navi_buttons">
<button class="drop_down_navi">Python Basics <i class="fa fa-angle-down"></i></button>
<div class="drop_down_navi_content">
Beginner
Pre-intermediate
Intermediate
</div>
</div>
Please refer to the images I am attaching as they will make it clear.
After scrolling a bit
While at top of page
Remove position:unset; replace with position:relative;
Separate the first two classes in the style sheet because it seems to be clashing
I'm trying to position the text over image better so it displays better in a centered div. In resolutions below 1k pexels. It really needs to be displayed better for desktop resolutions.
This is my webpage template and the content in the body is centered.
Website
If you view the page below 1k pixels it doesn't display correctly I wish for it to appear over the header about 10 pixels from left.
My HTML code where it is displayed.
<div id="header">
<div class="textoverimage">
<p>New two day trip - Zoo & New Years Eve<br /> Sydney Harbour 2012. Book now to avoid disappointment. </p>
</div>
</div>
My CSS for the above elements.
#header {
height: 205px;
width: 960px;
margin: 0px;
padding: 0px;
border-top: medium none #009933;
border-right: medium none #009933;
border-bottom: medium none #009933;
border-left: medium none #009933;
background: url(../_images/header.jpg) no-repeat;
}
.textoverimage {
z-index: 100;
position: absolute;
left: 350px;
top: 100px;
right: 30px;
bottom: 0px;
height: 50px;
width: 300px;
border: medium none #03F;
color: #FFF;
}
TYVY Jared
If you want to show your text over the image from left 10px
give position: relative to parent div and left:10px to .textoverimage class and remove padding-left from paragraph p, here is the code:
.textoverimage{
z-index: 100;
position: absolute;
left: 10px;
top: 100px;
right: 30px;
bottom: 0px;
height: 50px;
width: 300px;
border: medium none #03F;
color: #FFF;
}
#header {
height: 205px;
width: 960px;
margin: 0px;
padding: 0px;
border-top: medium none #009933;
border-right: medium none #009933;
border-bottom: medium none #009933;
border-left: medium none #009933;
background: url(../_images/header.jpg) no-repeat;
position: relative;
}
p {
padding: 15px 0;
margin: 1px;
vertical-align: text-top;
}
![screenshot][1]
[1]: http://i.stack.imgur.com/vGARy.jpg
Your #header needs position: relative; If it's relative then you can set left: 10px on the .textoverimage and top as you wish.
So recently I've come across an issue with Chrome in which if I set a z-index of -1 to a position: relative; unordered list, the links become unclickable.
See http://jsfiddle.net/raLnx/ in Chrome 20.0.1132.47m for an example.
There is no issue if both ul sections are given a positive z-index, but I figured this is either a bug in chrome or there is a better way than setting something position: relative; when I don't need to.
The css in question:
ul.over {
height: 40px;
line-height: 40px;
border-radius: 5px;
background-color: #DDD;
border-bottom: 2px solid #AAA;
}
ul.under {
height: 35px;
padding: 0 30px;
background-color: #EEE;
line-height: 35px;
font-size: 90%;
position: relative;
bottom: 5px;
z-index: -1;
}
Any ideas?
The reason it happens is because your div #nav is now above your list/links. You will have to remove z-index from your list.
This is quite an interesting issue I'm having with z-indexes that I've never encountered before. Let me go ahead and answer one of your first thoughts you might be having: I've already set the positioning I need for each element I have a z-index on, it's not that. I've tried reordering things as much as possible, but basically what I have is two fixed elements, one is the website's heading text, the next is a div containing an unordered list of navigation items (each floated left and given a percentage width).
Here's the location of the problem (make sure you're viewing at a width larger than 1000px).
For the life of me, I've not been able to pinpoint why exactly the first two navigation items ("Home" and "About") actually don't mouseover entirely. It seems as though their mouseover functionality is cut off by the descender in the heading above it.
I would create a jsFiddle of the issue, and in fact I did to try and point out my problem, but I am using a custom font for this, which to my knowledge wouldn't work in jsFiddle. Keep in mind, the issue is cross-browser, not IE-specific. Sorry I'm not much help otherwise, but I guess Firebug is your friend.
I will post this HTML/CSS code however, seeing as it might be easier than viewing in Firebug...
HTML:
<div id="header">
<h1 id="logo">Page Title</h1>
<h2 id="tagline">Here's a tagline</h2>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS:
#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; z-index: 4; }
#logo a, #tagline a { color: #FFF; text-shadow: 2px 2px 0px #f7be82; -webkit-text-shadow: 2px 2px 0px #f7be82; -moz-text-shadow: 2px 2px 0px #f7be82; -o-text-shadow: 2px 2px 0px #f7be82; }
#logo a:hover, #tagline a:hover { color: #FFF; }
#tagline { font-size: 18px; }
#tagline a { text-shadow: 1px 1px 0px #f7be82; -webkit-text-shadow: 1px 1px 0px #f7be82; -moz-text-shadow: 1px 1px 0px #f7be82; -o-text-shadow: 1px 1px 0px #f7be82; }
.pageTitle { text-align: center; font-size: 48px; }
#header {
position: fixed;
z-index: 3;
width: 960px;
background: #9cddc8;
}
#nav {
position: fixed;
z-index: 2;
width: 100%;
height: 50px;
top: 81px;
left: 0px;
background: #f7be82;
border-bottom: 2px solid #efb87e;
}
#nav ul { width: 900px; display: block; margin: 0 auto; overflow: hidden; }
#nav ul li {
position: relative;
z-index: 5;
float: left;
line-height: 50px;
width: 16.66%;
line-height: 45px;
text-align: center;
}
#nav ul li a {
font-family: 'Pacifico', cursive;
font-size: 24px;
color: #FFF;
text-shadow: 1px 1px 0px #9cddc8; -webkit-text-shadow: 1px 1px 0px #9cddc8; -moz-text-shadow: 1px 1px 0px #9cddc8; -o-text-shadow: 1px 1px 0px #9cddc8;
}
I appreciate any help on the issue, thanks!
The first two items are being cut-off because #logo has a z-index of 4 and #nav has a z-index of 2. Therefore, #logo will be above #nav.
It does not matter that the li descendants within #nav have a z-index of 5 as these elements are in a different stack context than #logo.
You will need to rethink the way you've set up your backgrounds since you need your logo above the orange bar, yet you need the logo under your nav elements.
You don't need the z-index on #nav. Apply position: relative and z-index: 10 (arbitrary, any index > 4 will work) to the ul in #nav.
#nav {
position: fixed;
width: 100%;
height: 50px;
top: 81px;
left: 0px;
background: #F7BE82;
border-bottom: 2px solid #EFB87E;
}
#nav ul {
width: 900px;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 10;
}
This will keep your logo above the orange stripe and place your menu items "over" your logo, thereby allowing the hover to work properly.
#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; <h1>z-index: 4</h1>; }
....
....
....
#nav {
position: fixed;
z-index: 2;
width: 100%;
height: 50px;
top: 81px;
left: 0px;
background: #f7be82;
border-bottom: 2px solid #efb87e;
}
...
...
...
you make the z-index of the logo is 4 then the nav one is 2, taht means that the logo will located ABOVE the nav, just change the nav's z-index to 4 and the logo's z-index to 2
hope this helps