Menu is supposed to be minimized on mobile site, but it is always shown

[ddheartland]

My menu on the mobile version of my website is supposed to be hidden unless clicked, but it is always showing and in front of the content below. I have to assume there's something wrong in my css, but I cannot figure it out. How could I fix this? The website it heartlandcpr.com if you want to see the code.

Thanks for anything you can do!

[Jon Fritz]

You should probably run your page through the validator to clean up your html errors. http://validator.w3.org/nu

I also see 2 links to the same .css file in that page along with some embedded css in the head. The way it's set up now, the embedded css would overwrite exact selectors from the first link, but then get overwritten by the second link. I'm guessing you don't want that.

I'm also not seeing anything in the css that would control the display of the menu when something is clicked.

href="#navlinks"

...doesn't do anything aside from bring the viewer to an element with id="navlinks". Since there isn't one with that id on your page, nothing happens. You have a #navlinks id in your css, but you aren't currently using it and the css isn't affecting the page because of it.

Did you mean to have that href be empty while being id'd as navlinks or something? Like...

<a href="#" id="navlinks">

[ddheartland]

I'm sorry, I don't know if I understand. Do you know where the issue lies or what could be added to make that hidden when the screen is smaller?

[osgood_ · Accepted solution]

ddheartland  wrote

I'm sorry, I don't know if I understand. Do you know where the issue lies or what could be added to make that hidden when the screen is smaller?

It does not appear that you have any coding that will 'hide' the links at mobile size.

Add the below to your css styles:

@media screen and (max-width: 768px) {

#navlinks {

display: none;

}

}

Then add the below code to all of your pages. Include it directly before the closing </head> tag of the pages.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$('#menulink').click(function(){

$('#navlinks').slideToggle();

});

});

</script>

Then remove 'navlinks' from the anchor tag but leave the #

<h2 id="menulink"><a href="#navlinks">Menu</a></h2>

[ddheartland]

Sorry, I've been out of the office since you replied. That initially fixed the issue, but then it messed up my accordions. I fixed my accordions now, but the menu issue replicates and is always shown now. Ideas?

[osgood_]

ddheartland  wrote

Sorry, I've been out of the office since you replied. That initially fixed the issue, but then it messed up my accordions. I fixed my accordions now, but the menu issue replicates and is always shown now. Ideas?

What accordions? I dont see any on your homepage?

[ddheartland]

They're on the "Payments&Schedule," "STAT PROGRAM" and "PetProject" page. Once I fixed them, the Menu issue replicated site-wide.

[osgood_]

ddheartland  wrote

They're on the "Payments&Schedule," "STAT PROGRAM" and "PetProject" page. Once I fixed them, the Menu issue replicated site-wide.

How is it messing the accordions up? They seem to work ok for me on the below page. Also you must remove the 'navlinks' wording from the the anchor tag '#navlinks' otherwise the page just keeps jumping down and that's not an effect you want to happen.

Heartland CPR Training, American Heart Association, BLS, ACLS & PALS, Healthcare Providers, Heartsav...

[ddheartland]

I'm so sorry, I just realized the computer's history hadn't been cleared and it was pulling a previous file. It is working and you helped so much! Thanks!

[osgood_]

ddheartland  wrote

I'm so sorry, I just realized the computer's history hadn't been cleared and it was pulling a previous file. It is working and you helped so much! Thanks!

No problem, great. Just remove the 'navlinks' wording from the anchor tag as it will be a better experience for your users.

[Nancy OShea]

I don't mean to be critical but some of your design choices need to be reconsidered.  Many people are sensitive to high frequency flicker.  That seizure inducing animated GIF is overwhelming. I had to close that page.  See related links below.

• Animated GIFs And Epilepsy Dangers
• G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) | Techniques fo...