[Solved] Responsive CSS Menu bar/Nav bar issue

[tommy5725]

Hello all,

I’m trying to update a sites navigation options to a responsive or somewhat responsive design.

The navbar seems to work well untill the screen is narrowed down to about 500px, and the menu goes to a 2×2 (two row layout). Even then the menu functions except for when “contact” is chosen. At that point the layout falls apart. Link 3 gets pushed way to the right and link 4 goes down another row. Select anything else and all is well again. I’m welcoming any input that could help. Here’s some links:

(http://www.newmanlandscaping.com/index2.php?page=contact “Problem Area/Page”)

(http://www.newmanlandscaping.com/index2.php “Temporary Homepage”)

[MOD EDIT – Code Dump removed]
[Sorry hope this is better. I wouldn’t include it all if I was certain the problem was in the “@media only screen and (min-width: 150px) and (max-width: 650px)” section but idk.]

(http://www.newmanlandscaping.com/style.css “CSS:”)

Thanks for looking,

Töm

[Paulie_D]

Please don’t dump a shedload of code on us…it’s very hard to read let alone parse in isolation. Plus it takes up way too much space.

Instead…make a Codepen.io example so we can actually see what is going on.

[tommy5725]

Wow, thank you so much!! I’ve been trying to revamp my cousins website because it looks ridiculous on mobile devises, and I spent hours fiddling with the different elements and got nowhere. There were 2 places where the height was set and removing them like you said was just the ticket!!

As for the “font element” idk what you mean. Then again I’ve been deprecated for an ice age. lol.

You have no idea how grateful I am for your post/response. Thanks Again!
Töm

[tommy5725]

OIC. Yeah that was pretty ugly. I had left the address out on the original site and just wanted to stuff it in there. -So i did.. the only way i could remember(2007). I didn’t want to forget again( they were getting job requests from out of state). I did per your suggestion try to pretty her up a little though.

She may look a little doubled up at the moment because my nephew wanted to see how it’d look with that three line menu thingy. Seems to be more trouble than its worth(lots of conflicts/”body id” issues). Especially now that I’ve got the main menu in the bag and working.(thanks to you)

As always thank you for your time,
Töm

[Author]

Posts