Running a website called , I have been facing an issue with the sticky hamburger menu located in the top left corner. Currently, the menu opens up when hovered over, which is inconvenient for touchscreen devices as it remains open on smartphones. I have attempted to modify the CSS code responsible for enabling hover effects, but even after disabling certain lines related to the top-menu styling:
#top-menu-selector:hover{color:#BD2A33;-moz-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.12);-webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 12);box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.12);}
#top-menu ul li:hover ul,
#top-menu ul li:hover ul li a,
The menu continues to trigger on hover. Disabling JavaScript also didn't resolve the issue. After analyzing further, I identified that a function within 'sticky.php' file is responsible for generating the menu:
<?php //title attribute gets in the way - remove it
$menu = wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' => false, 'fallback_cb' => 'fallback_pages', 'echo' => false ) );
$menu = preg_replace('/title=\"(.*?)\"/','',$menu);
echo $menu;
?>
I am uncertain about where to modify the CSS or insert the necessary JavaScript code to ensure that the menu opens on click instead of hover. Any guidance on this matter would be greatly appreciated.
UPDATE:
After thorough investigation, I discovered that removing the following element prevents the menu from expanding on hover:
<ul class="sf-js-enabled sf-shadow">
Now, my goal is to find a way to enable menu expansion upon clicking.
UPDATE 2:
To address the issue, I resolved it by incorporating an onclick function into the top menu like so:
<div id="top-menu" onclick="show_hide_menu();">
Subsequently, I added the following script:
<script type="text/javascript">
var clicked = false;
function show_hide_menu()
{
if(clicked == false){
document.getElementById("menu-main").style.display = "none";
clicked = true;
}else if (clicked == true){
document.getElementById("menu-main").style.display = "block";
clicked = false;
}
}
</script>
This solution effectively eliminates the need to modify the hover implementation and provides an option to close the menu by clicking on it. Moreover, it overrides the hover event, offering a seamless user experience.