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.
