My site's navigation dropdown menu is hidden behind the featured post slider on my front page. I've tried changing the z-index value of the navigation li, ul, etc but can't seem to get it to work. I've gone as far as adding a z-index to every single css element that the navigation relies upon, but it still is under the slider.
Would appreciate any help.
Site: Link
(The EVENTS dropdown)
Thanks.
It's easily fixed, with something like this:
#nav {
position: relative;
z-index: 20;
}
z-index on its own is not enough, as it only works on an element with position other than static (hence relative, which won't cause any issues).
Related
so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
On _layout.cshtml (inside the body tag):
<body>
<!--... OTHER Layout/header code...-->
#RenderSection("modals", required: false)
</body>
and in your view:
#section modals{
#Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
For example z-index: 3;
To be able to do this you have to set a position to your popup.
For example position: absolute;
After setting the position you can also adjust the position even more with putting this code in to your CSS
top: 500px; left:500px;
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
If you cannot understand what z-index is. I will provide a picture for you.
z-index axis example
I have a project, that has a Camera.js slider. The Drop-down submenu is rather long, and it keeps appearing below the slider.
I have tried switching around the position for the nav element with absolute, relative, fixed, gave it z-index of 99999, but still no change.
Can somebody help me out? I am out of ideas. The site is published here: http://www.xn--ftsszerels-c7ah27o.info/
Set your camera_wrap class z-index: -1.
i don't see any positioning/z-index set on the div.container element so try setting position:relative; z-index: (less than what is set on nav)
i think that should do it
The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though.
The website is:
"Bio" http://www.sairjanephotography.co.uk/bio.html
"Contact" http://www.sairjanephotography.co.uk/contact/contact.html
Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't.
Any help appreciated
You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.
Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:
/*Re-centres the nav menu on phones from tablet*/
#media screen and (max-width:37em){
.menu ul{
font-size:4em;
width:18em;
}
}
But if you remove width: 18em, all is well, it appears.
To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.
I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.
For example:
.menu.open + main {
margin-top 3em;
}
/* Add some transitions for show possibly */
main {
transition: 1s ease margin
}
I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
I'm building a navigation menu for a website and the menu has submenus. When the submenu slides down, it needs to lie behind the main navigation. I've tried using z-index but it won't work. Since the submenu is a child of the LI, is it not able to lie behind?
The code is a bit verbose due to the image sprite, so I'll link to a pastie:
http://pastie.org/1100075
And here's some images to support my explanation.
Desired outcome: http://imgur.com/WeU5T.png
Current outcome: http://imgur.com/0ZC4v.png
Move the li.home a link out side of ul.nav, and put it inside of an absolutely positioned block element with a z-index > 0.