My drop-down navigation function in Javascript is now working on mobile, which is fantastic. However, I am facing an issue where the drop-down wording on my "About Page" and "Index Page" is constantly showing, even though it should only display after the user clicks on it (refer to the attached video). This problem does not occur on other pages, and I am unsure why...
I have provided a video for reference. Could someone please review my repository and see if they can identify any issues? VIDEO:
If necessary, here is the link to clone the repository: [email protected]:Angela-Inniss/CB.git
The website is currently hosted on Heroku: (work in progress).
I attempted to hide the menu on mobile by using display: none, but this resulted in hiding the entire menu.
Snippet of my JavaScript click functionality:
const dropDown = document.getElementById("nav-bar-grey");
const navBarOpen = document.getElementById("new-drop-down-js");
dropDown.onclick = showNav;
const closeButton = document.getElementById("closebtn");
closeButton.onclick = closeNav;
function showNav(event) {
navBarOpen.classList.toggle("nav-open");
}
function closeNav(event) {
navBarOpen.classList.toggle("nav-close");
}
Code snippet from about page mobile.html.erb:
<!--//mobile -->
<div class="background-about-mobile">
<div class="white-bg-about">
<h3>About.</h3>
<div class="dash"> - </div>
<h6>Who are we?</h6>
<p class="about-text-mobile">We are a professional Carpet cleaning company that operates in the Leicestershire Region. Specialising in Carpet, Upholstery, hard floors, blinds and curtain cleaning fully insured, DBS Checked with 12 years plus experience.</p>
<div class="dash"> - </div>
<h6>What Services do we provide?</h6>
<ul>
<li>- Carpet cleaning</li>
<li>- Rug cleaning</li>
<li>- Stain removal</li>
<li>- Amtico and Karndean maintenance</li>
<li>- Hard Floor Maintenance</li>
<li>- Curtains and blinds cleaning.</li>
</ul>
</div>
I expect the drop-down menu to only appear once clicked on, especially on mobile devices.