Menu hiding behind search box on one page - css

Wordpress site - https://www.planninggeek.co.uk/
The home page has a search box and the dropdown menu above goes on top of it.
However if I go to the search page - https://www.planninggeek.co.uk/?s=
The the search box is on top of the menu dropdown.
I have played around with z-index but drawn a blank.
Anyone have an idea as to why this is happening. The code for the box is the same.

mega-search-wrap mega-static has a z-index

Related

Z-index on dropdown menu item

ETA: I was brought in to help with one little bit of this site. I am not the designer, so I had to ask permission to share the site and get a staging site set up. I can now provide the link....
https://staging3.childsfirststeps.com/
I have stripped all the z-index/overflow instances I had been working with so it's a relatively clean slate.
In a nutshell, I need the Home page slider frame to overlap the nav items as per the image attached below. ON the other pages, I need the page header (title bar) to overlap the nav items. All this, while preserving the dropdown menu.
A client has requested (despite all objections on our part) to do this nav design based on a static design (image) she found somewhere. I thought it was technically doable so I set out to recreate it. I managed to figure it out but ran into a snag when a dropdown menu item was added: the z-index on the dropdown item is not behaving.
I have positioned all related items and stacked the z-index as I would expect. Everything works properly except the dropdpown menu items which currently sit behind the page header.
The menu items are all transformed (rotated) and translate on hover. The page header (title bar) needs to be stacked higher than the nav to cover the bottom bits of the rotated menu items.
The HTML is of course rather convoluted as the site designer is using WordPress and Elementor so moving containers around is not possible.
I have tried every z-index and overflow setting on everything I can think of.
Is this design achievable with a dropdown menu item?
main nav image

Elements apear only after inspect element/resize broswer window

As title says go here: https://www.woopservices.com/portfolio/about/ and press the little "menu" button on the bottom left.
It will display an empty box which is supposed to have a shortcode for visual portfolio just like i have on my homepage but what is strange is that it will not load.
It only loads if I resize the window or inspect the element.
This is driving me crazy i have search on other posts but nothing seemed to help.

Wordpress - Top navigation menu issues

I'm working on a wordpress page and I have a problem with the top navigation menu. If you check my screenshot in the link, you can see a big white area under the top menu, which should not be there. It's as if the top menu extends all the way down there.
Naturally, if I remove the top navigation menu the white spice disappears, confirming this has something to do with that very menu.
I'm not well versed in wordpress. So I don't know exactly what files, code or setting I should check.
Any ideas?

Revolution Slider (Wordpress) Hiding Dropdown Menu (Superfish)

I'm currently coding a theme that calls for a revolution slider at the top of the page and I also need a dropdown menu system.
I'm trying to use Superfish and that works fine but when you hover to see the dropdown menu items, they show up underneath my slider.
I've tried playing around with z-index (including adding position: relative) but I just cannot get this to work. I've tried adding z-index of a ridiculous amount to the header, the menu, the list items basically everything I could but there must be something I'm missing.
I've found a few answers by Googling but it always suggests z-index.
The site can be found at:
http://clients.benpalmer.me/medina/introduction-to-south-arabian-civilization/#sidr-main
The dropdown menu should show up over the slider and is under the 'Inscriptions' menu item.
Any help would be massively appreciated!

Control position of accordion and how it opens when you use an anchor link?

I currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen

Resources