2022 theme menu dropdown clipped (z-index issue)
-
I’m using the 2022 theme. I’m an experienced WordPress developer. This site is for a non-profit that has no money. The site is a free account, so I can’t apply any additional CSS.
The site menu is displaying OK on the Home page. The Home page uses large header format. All other pages use a small header and the dropdowns doesn’t extend outside of the header.
The blog I need help with is: (visible only to logged in users)
-
I had a similar problem with the display of sub-menu items, and decided to move my menu below the (Cover block) header via the Editor, as a workaround.
-
I have not stopped working on this problem for 2 days. I tried to use the Chrome developer tool to define what CSS is causing the problem with no luck. My dropdowns are only 4 items, so I think, I’ll just extend my cover image, and move the nav up, for my workaround.
Can you please tell me approximately when you had this problem and with what theme?
-
I’m using the Twenty Twenty-three theme. Yesterday, I spoke with Support about my navigation (sub menu items) scrolling behind the Query Loop group. A solution was not forthcoming, so I moved my navigation. Good luck!
-
Thanks, I wanted to know if this is a long standing problem or new problem. I assumed it was a new problem.
-
Hi! Just to check, is this still ongoing for you? I had a look at https://friendsofthewoods.wordpress.com/ now using Firefox (version 112.0.2), but the child menus appear to be correctly appearing in front of the image below the navigation, rather than behind it.
-
The Home page is fine, but all other pages use a different smaller header. I have changed that header from height of 120px to much higher.
-
Hey there,
Thanks for reaching out!
I can’t seem to replicate this on Chrome, so I’m wondering if this could be theme specific – what browsers are in use?
-
I use both Edge and Chrome. I’m using a Windows 10 Pro laptop. I see the issue in both browsers.
In my poking around, I found that the drop-down seems to have a z-index of 2, which really surprised me. Since, I’m using the free version, I can’t do any custom CSS. It was working fine up to a few days ago,
-
Hi there,
Along with my colleagues I also cannot seem to spot this issue when I visit https://friendsofthewoods.wordpress.com/ which is a lovely site by the way. Totoro would very much like to go there. :)
I tried in Chrome, Firefox, and Safari, and for me the submenu appears in front of the image as expected. Here is a screenshot of what I see.
Firstly, I think there is some good news here, it’s likely that visitors to your site are seeing what we are seeing, a normally functioning site. It does seem clear though that what you are seeing is not working correctly at all, which is what I’d like to focus on if I may.
I noticed that you tried a few browsers and spotted this issue. For now I’d like to focus on troubleshooting your Chrome browser by trying the following
- clear your cache and cookies based on the steps google recommends here: https://support.google.com/accounts/answer/32050
- Also make sure you are not blocking any “3rd party cookies” in Chrome as explained in that guide as well.
- Please also try to visit your site in an “Incognito” window (File>New Incognito WIndow) and let us know if it somehow by magic works there. Usually, any browser extensions you may have added are not enabled in incognito windows, to this is a quick way to rule those out as the source of any errors.
If those do not work, I would like you to install Firefox on your computer temporarily (for testing purposes) and see if you can get your site to work correctly there, or if it suffers from the same issue. Also if you have another computer (or can borrow a friend’s for a second) does the menu work correctly there if you visit?
Thanks for the additional info!
-
The site menu is displaying OK on the Home page. The Home page uses large header format. All other pages use a small header and the dropdowns doesn’t extend outside of the header.
From the initial postAnd again …
The Home page is fine, but all other pages use a different smaller header. I have changed that header from height of 120px to much higher.
May 2, 8:06 amI have two headers, one works and one is not so good.
The page you have an image of is the one that works. Please look at the ‘About’ page or any other page with the ‘cover image’ underneath the menu. The ‘Seasons’ menu item should display the four seasons, but it abruptly stops at the bottom of the ‘cover image’.
I’ve looked at it with two other computers. I will look at it with my other computer with Firefox. But please look at the other pages. I have undone the 120px bottom padding.
-
I looked at it on another computer with FireFox browser and it displays a clipped dropdown on the Seasons menu item.
-
Hey, @philhuhn
It looks like removing that padding made the issue apparent and we can see that.
I’ve compared the two headers and I’m wondering if the combination of blocks in use, has revealed a quirk. For example, it’s not very common (although you should be able to…) sit a row > navigation > on top of a cover block.
Would it be ok to create a test template and have a fiddle around at block combinations?
-
I removed the cover image and then the dropdown extended beyond the header. The issue now seems to be defined. Unfortunately, I mistakenly broke the header. I will need to fix the header tomorrow.
-
I’m an experienced WordPress developer. I have WordPress on my laptop and actually put up the site on my laptop. I’m not having this issue on my laptop instance. As I understand, you folks modify the open-source WordPress and per WordPress.org’s forum modify the themes, the assumption is this is on you folk to correct the issue, since I don’t have the Custom CSS option.
-
Hey there,
Thanks for that extra information.
I’m an experienced WordPress developer. I have WordPress on my laptop and actually put up the site on my laptop.
Interesting – have you created this header combination locally on the same theme and not experienced this issue?
Many thanks!
-
-
I have updated both the WordPress.com site and my laptops localhost sites to the TwentyTwenty-Three theme. The ‘small header’ with a background cover image on the WordPress.com site does not display the dropdowns properly as described in the initial post. The ‘small header’ with a background cover image on the localhost site displays the dropdowns properly.
What is happening with this issue?
-
Good Morning –
We asked our theme team to take a look at this and they are working on updating parts of the theme that needed to be updated. I don’t have a time line to share at this point.
When I look at your site, I see that the front page has a larger header image than the other pages. I also see the drop down items working when I hover on those from the menu. Here’s a screen shot. But it seems that the drop downs are incomplete on account of the reduced header size. Am I understanding this correctly?
My cursor is hovered on the
moremenu item to display the drop down ofThe Pond, Flor, Fauna. This also works when I hover onseasons. However, there are only 3 seasons listed which prompted me to go back, reread, and compare that to the front page view. There, I can see the menu drop downs in full.
I’ll be happy to provide the CSS upgrade needed for you to fix things as a temporary work around until the theme updates have been deployed. You’ll see that’s been added to your account by clicking on My Sites – Upgrades.
This CSS added to the customizer should fix things up.
.wp-block-cover { overflow: visible; } -
Thanks Zinnia: Yes the More menu item should have 4 items (The Pond/Flora/Fauna/Contact Us).
I’ve applied the CSS to the customizer, and now the menu dropdowns are displaying properly. I’ve returned the menu to the desired height and padding.
- The topic ‘2022 theme menu dropdown clipped (z-index issue)’ is closed to new replies.
WordPress.com Forums 