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
Related
How can I design this triangular corner marked with yellow color on top side of the inside div?
Make a triangle then position that by position: absolute. more explanation in code:
.box {
width: 200px;
height: 200px;
background-color: white;
border: 12px solid #aaa;
}
.triangle-left {
width: 0; /* this five code lines for making a triangle */
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid white;
border-bottom: 8px solid transparent;
position: absolute; /* this three code line for positioning of triangle */
top: 60px;
left: 10px;
}
<div class="box"></div>
<div class="triangle-left"></div>
See this for how making a triangle: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left
try this one!
anything you want is here,
but first try to make a container then copy the code! https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left
So I'm trying to make a top menu bar in a fixed position.
The problem is while everything looks alright when scrolling, all images, divs and all that goes behind the div when scrolling, the text, on the other hand, is still in front of the menu.
I've made sure that the text is loaded in before the div in code but yet it goes in front like this:
https://i.gyazo.com/4ac5dfd1d316c47a80a6991fc286e0b4.gif
The code is quite messy since I'm quite new to all this but I'll try to show the important parts of the code.
HTML:
<div class="logotext">
<h1>Rustic Café</h1>
</div>
<div class="topwood"></div>
CSS:
.logotext
{
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 41%;
width: 100vw;
height: auto;
z-index: 998;
font-size: 83px;
font-family: "Satisfy", cursive;
text-shadow: 10px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.topwood
{
width: 100%;
height: 4.2vw;
top: 0vw;
left: 0vw;
position: fixed;
background-color: rgb(236, 236, 236);
box-shadow: 0 0 3px;
}
The problem is due to 'z-index' property in CSS. your top bar menu z-index should be greater than the text.
for example:
.topBar {
position: fixed;
z-index: 999
}
.text {
position: relative;
z-index: 998;
}
Why do .logotext need a z-index of 998?
Anyway, All you need is to add a higher z-index value to your header.
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!
I narrowed tmy issue down to the CSS Line position:relative; and if I remove it, it works, but then the category cat-work (Blue label) is shown at the top left. Idk how to fix it to be honest. Here the Code on Codepen ;
http://codepen.io/Allkind/pen/YXEjXX
article{
width:auto;
min-height:10em;
box-shadow: 0 0 4px rgba(0,0,0,.7);
margin: 1em;
font-family: 'Quicksand';
float: left;
position:relative;
}
Note : Yes the Picture is too big but I tried it with others - same result. So someone might be able to have a better solution then remove the Label?^^
It's not transparent, your navbar is being overlapped by the article tag. To fix that set z-index in your navbar.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 2; /* the z-index */
}
Working Code
I'm trying to create this as below and couldn't finish it.
I can only manage to create a rounded corners on left but not slanted right.
(source: kerrydeaf.com)
#talkbubble
{
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
Or here is
http://jsfiddle.net/alma/USezL/23/
i think this is what u are looking for http://css-tricks.com/snippets/css/css-triangle/
http://jsfiddle.net/zQKhb/
#talkbubble
{
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
#talkbubble:before
{
content:"";
display:block;
position: absolute;
right: -36px;
top:0;
width: 0;
height: 0;
border: 18px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
You were missing some crucial points in your triangle on the right. First of all, by default a :before element is display: inline, so to create the effect you were seeking you needed display: block instead.
Second, the right: 120px was moving it 120 pixels away from the right side of its original position. That is, it was being pushed to the left, out of view. Instead, you needed a negative right position (move to the right) of 100% (the width of the speech bubble). That way, it'd end up to the right of it.
Third, not sure what shape you were going for but it was almost everything but a triangle ;).
I went for this instead:
#talkbubble:before
{
content:" ";
display: block;
position: relative;
right: -100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #FFCC05;
}
The first part is for the positioning, the second part is creating the actual triangle (see http://css-tricks.com/snippets/css/css-triangle/).
In the jsfiddle I made the triangle blue so you can see exactly where it is. Change the border-right width to make the angle bigger. http://jsfiddle.net/USezL/31/