So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example
But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2
(the links are server archives, won't be changed.)
Sincerely,
a confused dev.
Changed your code in your first exmple, now it's working fine:
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
height: 300px;
/*changed*/
z-index: 100001;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
/*added*/
position: relative;
}
You have to add position:relative to the elements using z-index make the z-index work
Found the problem:
Add position: to #headimage in the css.
My bad guys :).
Related
I am creating a website using WordPress. My client needs a similar design to be created in WordPress. In design, there are blog posts that are separated by a divider. Check the screenshot, I want to create something similar to this:
https://i.stack.imgur.com/xG4Nr.png
I am confused about how to cut a border in two halves and place an SVG in the center. Will someone guide me on how to do that? Need it done via CSS.
Class Name: .ast-separate-container .ast-article-post
I was using Astra theme! Thanks to botivegh for helping me 🤍
here is an example how to achieve this, just adjust to your own classes:
<style>
div.your-container {
width: 100%;
display: inline-block;
position: relative;
}
hr.your-hr {
display: inline-block;
width: calc(50% - 20px);
}
.your-img {
display: inline-block;
background-image: url(https://svgur.com/i/byb.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
background-position: center center;
}
</style>
<div class="your-container">
<hr class="your-hr" />
<div class="your-img"></div>
<hr class="your-hr" />
</div>
EDIT
I'm leaving the general answer above. But here is the css you need to add and it will do the trick. Everything is set that the image is 20px. If you want to change that, you need to adjust the background-size, width, height and left attributes. Hope this will help.
.ast-separate-container .ast-article-post::after{
content: "";
position: absolute;
bottom: -12px;
z-index: 10;
left: calc(50% - 10px);
background-image: url(https://svgur.com/i/byb.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
background-position: center center;
}
I am trying to make a replica of taco bell's website just for fun and as a challenge, and the replica website is private so no one will see it, anyways I am trying to make a side bar, it went good so far until this extra space (https://imgur.com/8soZSIg) appeared in the side bar, here is my css code (also I am a beginner):
.nav {
height: 84%;
width: 150px;
max-height: 84%;
position: fixed;
z-index: 1;
top: 137px;
left: 0;
background-color: #111;
max-width: 100%;
overflow-x: hidden;
padding-top: 0px;
padding: 0px;
padding-bottom: 0px;
min-width: 150px;
margin-bottom: 0px;
}
Try using display: inline-block it will work better since it will turm into an inline element with block element properties but also make sure to fix the max height and max width stuff because they are probably what is causing that space.
I researched a lot and could not find the solution for my problem. The footer overlaps the fixed sidebar. I want to prevent divs overlapping each other. Could you please help me. Z-index does not solve the problem.
#sidebar {
margin: 140px 0px 0px 572px;
float: right;
width: 226px;
position: fixed;
}
#footer {
clear: both;
height: 55px;
width: 100%;
position: relative;
}
Make your sidebar opaque by giving it a background color or image.
for example: https://jsfiddle.net/a3t22856/
The piece I added is:
background-color: white;
I checked my Tumblr theme on IE and the footer is in the middle of the page and here is the code I have.
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
width: 100%;
position: absolute;
left: 0px;
bottom: -38px;
}
Is there an Internet Explorer 9 solution to that?
Ryan Fait has the best cross browser solution to a sticky footer
See Here
But there are countless examples of sticky footers using just CSS on stackoverflow.
Based on the code provided, I would guess that you need to change it to something like this-
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-right: auto;
margin-left: auto;
width: 100%;
position: fixed; /* keeps the footer visible even when scrolling*/
bottom: 0px;
}
Note that the top and bottom margins have been removed, they were most likely the cause of the positioning problem.
Hi just looking to see if anyone can help me out with a small problem.
I'm trying to layer images using the z-index in css but for some reason even though i have given the div that i want on top the higher index value the layer I want beneath keeps pushing it down or covering the layer I want on top:
#work-img {
background: url(../images/blots2.png) no-repeat scroll left top transparent;
width: 960px;
height: 601px;
position: absolute;
top: 610px;
left: 0;
visibility: visible;
z-index: 6;
display:block;
}
#work {
background: url(../images/my-work.png) no-repeat scroll 0 0 transparent;
position: absolute;
width:337px;
height: 35px;
left: 35px;
top: 660px;
visibility: visible;
z-index: 700;
display:block;
}
Not sure what im doing wrong so any input anyone can give me would be really great thanks!
I don't see a problem with your css. I did a quick example here and worked fine using the same properties as you.
Aren't these divs inheriting some property of another element? You can see that using firebug.