Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I've got a problem on my client's website, here is the link: https://www.wisetrailrunning.com/products/nanoshell-160g-pour-homme
I don't think it's a Shopify problem, I think its css.
When you scroll down, the fixed header is above certains elements, and behind certains elements.
I've tried to set a z-index to the element and his parents.
I've tried to set opacity 1 to the element and his parents.
I've tried to set background color to white to the element and his parents.
I've tried to set the positions to the element and his parents.
Nothing worked.
I've searched for many topics on the website but didn't find a working answer after few hours.
Thanks a lot for your help !
I've checked your css and should work only adding this
.transition-body {
z-index: 1;
position: relative;
}
That happens because z-index work in a way you have to put it on main parents. That's why I added it on .transition-body and not in header. Because .transition-body is the parent of header and it's in the same html level than .shopify-section
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)
By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I can't seem to figure out how to get the leaf image in my footer to have a higher z-index (I tried in the inspector, not in my stylesheets). I'd like it to be on top of the section above it and on top of the section below it. I'd be willing to change it to an pseudo element if that would work better.
https://bhr-caterers.nk-creative.com/
for it to be appeared on top of the section above you don't need to change the z-index, because your element is after the above element. you just have to let it show the overflow content so add
overflow:visible
to footer tag with this classes: "fusion-footer-widget-area fusion-widget-area"
for the section below it you need to add
z-index: 1
to the footer tag with id: "footer".
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
On chrome the drop down menu appears behind the top most image at this page I am playing with.
http://www.audiobookreviews.com/genre2.php
I messed with the z-axis and set all z-axis for the menu to 999, then also tried making the image bigger/smaller but still happens.
Replace center tag with section since center is obsolete. You need to set your element's z-index in such a way that element that has to appear on top has higher value of it. Something like this:
.w3-dropdown-content {
z-index: 999;
}
section {
z-index: 1;
}
P.S. I know you provided a link to your website but it's more useful to have a certain chunk of code you are refering to posted here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I just started learning HTML/CSS and I've encountered a problem. On my website (www.seandorsman.nl) I have a nav bar on top with a drop down menu. The menu works fine but it is behind the slideshow I have on the main page.
Is there a way to make the navbar always appear in front of the slideshow?
You want to use z-index: in your stylesheet, so I would make your nav bar a higher z-index than the slideshow. This is basically a hierarchy of where elements lay on top of each other, setting z-index: 999; in your css for the navigation bar and drop down should fix your issue.
I would try to show you where exactly to add it but the link you provided does not seem to work.
As other people have mentioned, you will want to apply a high z-index to the navbar. However, for this to work you will also need to apply position:relative;, as z-index requires a position to be set.
you can add a z-index to your menu items. for example, if your css is like this:
#menu li {
z-index:9999;
}
it would take all of the list items and move them to layer 9999. sometimes the position attribute can play into this as well, but I would try modifying the z-index first.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.