We are experiencing two specific issues with our WordPress site that uses a Gutenberg-based theme and WPForo for the forum.
Forum Page Header Menu Display Issue:
-
On the forum page (
https://bernamuldur.com/forum/), the header menu behaves incorrectly on mobile devices. -
Both the desktop menu and the mobile “hamburger” menu are visible at the same time, overlapping each other.
-
On desktop, the menu appears correctly.
-
This issue only occurs on the forum page; all other pages display the header menus normally.
-
We need a solution that hides all menus on the forum page and shows only a single mobile-friendly link to the homepage (
https://bernamuldur.com).Mobile View Header Overflow / Hidden Sides Issue:
-
When viewing the site on an actual mobile device, not just resizing the browser, the header menu does not display the full width.
-
The extreme left and right parts of the menu are cut off, making it impossible to see or click the first and last items.
-
On desktop or when simulating mobile via browser resizing, this issue does not appear, so it seems related to mobile viewport settings or CSS styling for real devices.
Requirements:
-
The fix for the forum page must only apply to the forum page (
body.page-id-5130) and must not affect any other pages. -
On mobile, only a single clickable “Home” link should appear at the top of the forum page.
-
The mobile menu should display fully and not cut off the first or last menu items.
Notes / Observations:
-
The current header is a standard Gutenberg navigation block.
-
WPForo might be interacting with the theme CSS and affecting the mobile menu behavior.
-
Media queries in CSS for
max-width: 768pxhave been attempted but are not fully resolving the issue.bernamuldur.com/forum - forum page
screenshots added
Thank you
-
-
Please try the CSS code below :
@media screen and (max-width: 600px) {
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container {
display:none;
}
}
After applying the code, make sure to clear all caches before checking the result.
Also, please test it in incognito/private mode, especially on mobile devices. Mobile browsers often use aggressive caching, so changes may not appear immediately.
Hello and thank you for reply . Here is whats happened ;
After applying CSS to hide the WordPress navigation only on the forum page (page-id-5130), the hamburger menu becomes visible, but it does not open when clicked. Additionally, when the hamburger icon is tapped on a real mobile device, the entire page freezes / becomes unresponsive until a refresh.
1. Hamburger menu appears, but does NOT work on the forum page
-
The hamburger icon is visible.
-
Clicking it does nothing (no panel opens).
-
After clicking, the whole page becomes frozen, scrolling stops, the page stops responding.
-
This issue happens only on the WPForo page.
-
Other pages on the website behave normally.
2. Real mobile devices show a different issue than browser-responsive mode
-
When using Chrome/Firefox responsive mode on desktop, the forum page appears normal.
-
But on actual phones (iPhone / Android):
-
The left and right sides of the page are cut off.
-
You cannot see the full width of the forum.
-
Menu and layout appear clipped.
-
Looks like a viewport or overflow problem.
After applying this:
-
The hamburger icon appears.
-
But the menu never opens.
-
Page becomes frozen when interacting with the menu.
-
-
AS YOU CAN SEE THIS IS MOBILE VIEW AND FORUM HAS MISSING PARTS
MISSING PARTS SHOWN IN DESKTOP VIEW OF FORUM
