Why does z-index not work with sticky elements? [closed] - javascript

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 6 years ago.
Improve this question
I have some rollover effects in a sticky footer and a responsive menu / nav that sticks to the top. When the nav is opened and is long enough to go over the footer it covers everything except the rollovers.
nav closed http://www.musictheorytutorials.com/navclosed.png
nav open http://www.musictheorytutorials.com/navopen.png
I have tried lots of changes, searched on here and then tried to rebuild a simple version in jsfiddle as an example of it not working and it worked! However making these changes to my actual page do not...
Here is the jsfiddle that does work: /m_d_a/y7Lj3rms/26/
Here is rge jsfiddle that doesn't: /m_d_a/4bLyt681/5/
I can't get the code tags to work properly when cutting and pasting in either, sorry.
I know there is a lot of javascript, most of which is cut and pasted from linked js plug-in files which I don't understand, so I think it's gonna be something in there. If anyone can trudge through this I would really appreciate it. I will also change the title of this question to reflect a working answer to help people in the future.
Thank you.

just modify this selector in your css
from
.menu {
position: relative;
z-indez: 100;
}
to
.menu {
z-index: 100 !important;
}

Related

How to remove the extra space from the right side? [closed]

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
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden

How do I put bootstrap navbar ON hero image [closed]

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 2 years ago.
Improve this question
I am using the Hero Image example code from W3Schools and the Bootstrap Navbar, and they won't connect. Like there's a little space in between filled with background color. StackOverflow wouldnt let me post the code here because it was too long, so here are the links:https://www.w3schools.com/howto/howto_css_hero_image.asp
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
https://kalpact.repl.co
Your navbar has an explicit bottom margin, coming from navbar.less:.
.navbar {
margin-bottom: #navbar-margin-bottom;
}
Ideally, you should find where "navbar-margin-bottom" is defined and change it to 0. But... I've searched for that definition and can't seem to find it anywhere. You may have to just add this to your main stylesheet:
.navbar {
margin-bottom: 0;
}

Bug in Bootstrap carousel when click on next and back [closed]

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 6 years ago.
Improve this question
I have integrated bootstrap carousel but when i click on next and prev it shows some bug. Can someone help me what am missing ?
here is the link of website http://logmak.justevent.in/ please check 4 product slider.
You placed a function that changes how carousel behaves by default, just after you initiate it. That's what's causing your problem.
A quickfix would be:
.item.next.left {
display: none;
}
but there will be no transition from the old items to the new ones, at the end of the slide transition. My advice is to look for a carousel that allows you to set the step of the slide out of the box, such as slick.js.
(Not endorsing it, feel free to look for better alternatives. I use it because it's easy to style and quite small, pefect for my own needs. Your needs might be different.)

Floats / Margins in Firefox [closed]

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 8 years ago.
Improve this question
I'm having a weird issue that I appear to only see in Firefox. Chrome and surprisingly IE work just fine. The site that link below works fine in both of these browsers but in firefox the whole page gets pushed to the right while the #spotlightbar get pushed to the left. Im at a loss of what the problem may be. Any suggestions?
http://www.bristolymca.net/index.php
EDIT: So this has been solved. Thanks for the quick help to all.
SOLUTION: Obviously when you you float one div on a page inside of a content block either the rest needs to be floated as well or you need to clear the float before and after what you have floated. This was my mistake in misnaming CSS classes. So for future reference make sure those are the same name!
You have no styles on
<div id="contentHome">
Add some css like this;
#contentHome {
float: left;
width: 100%;
}
Well, my first suggestion would be to prevent using tables for layout elements and inline styling.
I removed the inline styling and added the following css properties to it:
width: 100%;
float: left;
That solved the problem to me.
PS: Pretty webpage, congrats!

Menu/Page Zoom Out effect? [closed]

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 8 years ago.
Improve this question
There's this really cool effect I'd like to recreate, however I don't understand how the developer is achieving it. I've looked at the source - but I still don't quite understand.
The site is: http://drewwilson.com and below will be a couple of screenshots of what is happening.
When I click on the ellipsis on the header, a little about element pops up and the actual site 'zooms' backwards, leaving whitespace around it's border and greys out.
I can't see any javascript or jQuery doing it, so i'm assuming it's css?! - Although I might have missed something totally - so any help is appreciated :)
Inactivated
Activated
I think the whole page is wrapped in a div which have a 100% height and 100% width. So you have a control over everything inside that element.
You can achieve that by using css3 transform: scale(value); and of course jQuery
see samples here

Categories

Resources