Mobile compatibility is theme dependent.
I recommend asking at your theme’s dedicated support so its developers and support community can help you with this.
Can ssomeone not tell me what changes they made to mobile navigation so I can fix it myself?
My ttheme doesn’t get updated anymore I update it myself I just don’t know what they changed to break it
Unfortunately, you haven’t mentioned the theme you use yet. A link to your website would be ideal. Then we could tell you what you need to do.
Without this information, we can’t really help you. Every theme is unique. Every source code is different. We can’t tell you “change this to this” because we don’t know whether it even exists on your website.
If you don’t want to show your link, you have two options:
a) Learn HTML and CSS. Then you can solve your problem yourself in a while.
b) Find someone who can help you personally. You can find someone like that here, for example: https://jobs.wordpress.net
And two more tips:
If you have already customized the theme you are using yourself, even the original theme support can’t help you. In WordPress, you shouldn’t customize the theme, plugin and WordPress core files unless you wrote them yourself. If you want to adjust something in a theme, you use child themes, see: https://developer.projectdmc.org/themes/advanced-topics/child-themes/
If the theme you are using has not received any updates for a while, you may want to consider switching to a different theme. It is questionable how long the theme you are using will be compatible with the PHP specified by your hosting, for example. Compatibility with WordPress could also be a problem. A new theme that is also actively maintained by the developer can help with this.
I am using Strategist FSE them but not to worry I used my coding knowledge and fixed it myself here is the solution for anyone using the same theme as you wont get support for this theme from the creators last updated was May 23rd 2023.
I dont need a theme that is maintained by other developers i maintain it myself as I’ve learned in the past relying on other developers is against one of my rules of development so hope this helps anyone with the issue i had. I just had to inspect the navigation to get all the info i needed to make the updates myself
Add this to functions.php in your Strategist FSE theme
// Navigation update for wordpress 6.6
function custom_mobile_menu_script() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.wp-block-navigation__responsive-container-open');
const menu = document.querySelector('.wp-block-navigation__responsive-container');
const closeButton = document.querySelector('.wp-block-navigation__responsive-container-close');if (menuToggle && menu) {
menuToggle.addEventListener('click', function() {
menu.classList.toggle('is-menu-open');
document.body.classList.toggle('menu-open');
});
}
if (closeButton) {
closeButton.addEventListener('click', function() {
menu.classList.remove('is-menu-open');
document.body.classList.remove('menu-open');
});
}
});
</script>
<?php
}
add_action('wp_footer', 'custom_mobile_menu_script');
You don’t need to use the css code bellow it will fall back to the styling used by the theme itself however you can use the css bellow if you want to style it yourself
/* Mobile navigation menu *//* Ensure the menu is hidden by default */
.wp-block-navigation__responsive-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cover the full viewport */
z-index: 9999; /* Ensure it is above other content */
overflow-y: auto; /* Allow scrolling if menu content exceeds viewport height */
transition: opacity 0.3s ease; /* Smooth transition for visibility */
}
/* Show the menu when it has the 'is-menu-open' class */
.wp-block-navigation__responsive-container.is-menu-open {
display: block; /* Show the menu */
opacity: 1; /* Ensure menu is fully opaque */
}
/* Disable scrolling on the body when menu is open */
body.menu-open {
overflow: hidden; /* Prevent scrolling */
}
/* Style the menu container content */
.wp-block-navigation__responsive-container-content {
box-sizing: border-box; /* Include padding in the element’s width */
}
/* Style the menu items */
.wp-block-navigation__responsive-container-content ul {
padding: 0;
margin: 0;
}
.wp-block-navigation__responsive-container-content li {
padding: 10px 20px; /* Add padding around menu items */
}
/* Ensure links within the menu are styled correctly */
.wp-block-navigation__responsive-container-content a {
color: #fff; /* Set the link color */
display: block; /* Ensure the link fills the entire menu item */
}