I am creating a dropdown menu, for that I created a div and it's working fine but when I add the content on that div and then hover over it. The divs above the dropdown content div shifts.
How can I resolve this issue?
I don't want to have to use the position absolute.
Related
The menu icon located at the top right of my screen disappears when the page is scrolled & the header item becomes sticky. I have tried changing colours but the problem remains the same. I've tried altering the CSS manually & with different WordPress plugins. I've had no results.
Notice the menu icon on the right.
This is what happens after scrolling.
I think the header has style position: relative;
And the menu button is absolute, so when you change header position to sticky, header is not relative for menu button already.
Try wrap menu button with div tag, and set position relative to it.
I have a problem with my website https://kudatoday.kz/ where I'm trying to make my slide in menu visible with overflow:hidden on the parent element.
I tried to set position:absolute to .slide-in-menu and position:absolute to header element however it didn't help.
My slide in menu is still hidden. I used overflow:hidden just to hide the white blank space on the right, because it appeared once I've created side in menu.
Could you please take a look?
What it should be and what we have:
Put overflow-x:hidden in the <body> tag and then remove overflow:hidden from the css et_pb_section_0_tb_header in the header <div> that is causing the slide in menu to be clipped.
That should solve the clipping issue.
You also need to change position:absolute to position:fixed in the .et_pb_row_1_tb_header css for the slide in menu because it currently scrolls the slide in menu when you scroll the main web page.
I'm trying to create a fixed navigation bar with buttons(aligned left) and a title(aligned right). Before i fixed the position to the top of the page, it works as intended (other than not moving when scrolling, obviously). However, when i fix the position of the header, it moves my title over to the left with the buttons. How can I fix this? I've tried to make it into a div inside of the header tag and position:absolute the div; didn't work.
Here is what my page looks like
On this page (Wordpress site), the pink element becomes sticky when it touches the menu. But this element is unclickable because of the logo on the left, which makes the menu wrapper higher, thus making the sticky element unclickable.
I can't use pointer-events:none on the menu div, because that makes the menu + logo unclickable.
Also, z-index is of no use as the sticky element is nested in the content wrapper. So if I'd make the z-index of the content higher than the menu, the content will scroll on top of the menu.
I should probably separate the sticky element from the content wrapper, but as I'm no expert with the Wordpress wireframes, I don't know how.
Or are there any other tricks I could try?
If you just set the class fusion-logo to position: absolute the logo container won't follow the normal flow of the element, so that fusion-header height will be the same of the navigation menu and the pink element will be right below to it, clickable
I have two buttons in a div with position: fixed; but when you click, the list of options disappeared.
I wrote my code in the link below, you can help me?
http://jsfiddle.net/T9QHw/
Thanks.
The list of options disappear, because you're telling the div to hide everything that goes beyond the div itself using overflow:hidden. Clearly, the dropdown menu is outside of the div.
Remove overflow:hidden and it will work.