I am running WordPress 5.2 on the default theme and made a custom nav bar where I used CSS so the dropdown menu is invisible unless its parent is hovered over. Recently it stopped working (when I hover over it doesn't appear).
When I use the Chrome console to turn the element:hover on and inspect the dropdown menu, it shows the element is there (CSS attribute display is indeed set to block instead of none). I checked z-index and opacity (2 and 1 respectively) so I don't think that is the issue.
http://ess.ccmcanada.org
Page while inspecting element:
You have to remove overflow-y: hidden from #main-nav, because this is hiding the dropdown menus that are outside its dimensions.
Remember: common properties that may be hiding an element that you can investigate are usually these: display, visibility, position, z-index, opacity, transform and overflow.
Related
I am creating a template and getting problem in adjusting the header. Everything is almost completed but header shows the problem. The problem is when one hover over the menu, it shows everything working great but one hover any nav item which have drop down menu, then it decreases the font size for the next item.
I have tried creating a new header also but still gets the same problem only when there is a drop down menu.
You can check the code at http://html.daatcreations.com/mobeva/
The artifact you are seeing isn't a change in the font size, it is caused by the rotateX transform. The browser is making room for the edge of the dropdown that has been rotated around the X-axis so you can see the edge.
It's hard to diagnose but it's easy to fix. You need to set the backface-visibility property to hidden on the elements that are rotating or making room for the rotated element's edge.
.dropdown {
backface-visibility: hidden;
}
I have a HTML element (position:absolute) positioned over my canvas/stage (createjs). For some reason the element is not visible.
The HTML element contains some buttons, so if i click in the area the buttons are in the suddenly become visible.
Is there a trick to having HTML elements on top of the canvas/stage?
Update: This only occurs on mobile.On desktop version things are layered and properly visible.
I think you can use the z-index css property.
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
I found a neat CSS Slider by AMKohn:
http://codepen.io/AMKohn/pen/EKJHf
The slider works by using radio buttons and labels to move between 'slides'.
Slides are hidden by default and are displayed when their respective radio buttons are checked.
I've modified the slider so that each photo is accompanied by a caption below it that extends the width of the browser.
http://codepen.io/anon/pen/AlsJx/
As a result, my mark-up and CSS are a little different from the original, but the principals are still the same (still uses labels and radio buttons to move between slides).
I think this is affecting the labels (which act as nav buttons). These do not display on hover when using
position:absolute;
However, when the position is set to relative the buttons work fine except they are not in the right place (on either side of the photos).
Can someone explain how to fix this?
Solved the issue.
Essentially, the problem was due to using position:absolute on the parent element .slides.
I made it display:hidden by default and display:block when input:checked.
This prevented the divs from "stacking", which I concluded (in a very non-technical way) was the reason why the nav buttons didn't work.
The working slider is here:
http://codepen.io/anon/pen/hAnre/
I have a Drop Down menu and a slide show. I want my DD menu to be over the slide show, not the oposite.
I have tried z-index, but it didn't work.
Thanks.
EDIT: I solved it, z-index wasn't in the right place.
That's a common one, I recommend you use Chrome Developer Tools or Firebug to inspect your element and see what css properties are being applied.
Another gotcha is that elements must have a CSS position. If an item has a position of static or no position is specified, it won't be affected by the z-index.