I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen.
The JavaScript code for toggling the menu using a button is shown below.
$(document).ready(function() {
//Menu Toggle Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content initially
$(".site-nav ul").hide();
});
My dilemma lies in wanting to hide the toggle button and the toggle functionality when the screen width exceeds, let's say, 480 pixels, while keeping the site-nav ul visible. I've attempted to achieve this by combining the following code with the one above, but haven't been successful.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
Since I'm not very experienced in JavaScript, any guidance on why it didn't work along with potential solutions would be greatly appreciated.