Responsive Mobile Navigation Menu and the War on CSS

[jd42]

Greetings, fellow soldiers.

I’m making a website for a friend’s business, and I’m kind of using it as my gateway into front-end design and development. This is the first site I’ve ever created from scratch and small problems like this one have been building up, lying in wait along the sidelines, reloading their psuedo-ammunition, preparing to flank me.

I’m trying to do a mobile-first responsive design. You can find the current version of the site here: http://wwctest.co.nf/. It is currently in shambles due to some jQuery troubleshooting and various other problems.

[THIS IS WHERE THIS POST ACTUALLY STARTS]

So I’ve been following this tutorial:

http://www.hongkiat.com/blog/responsive-web-nav/

And I’ve been having a few problems that I think all have to do with the CSS. The jQuery and HTML appear to be functioning as they should.

My problems are as follows:

1.The menu a element does not display the menu.png image even though it is properly linked to.

1. When clicking on the menu a element, the nav ul displays horizontally instead of vertically and some of the li elements are hidden.

2. The menu button drops down to the opposite side for some reason (a float issue?) and the whole thing just doesn’t look right…If you have a look at the site you’ll see what I mean.

The tutorial takes a large screen first procedure, but I tried to rewrite it slightly to fit my mobile-first hierarchy. That could be part of the problem.

The tutorial also employs the use of “clearfix” and pseudo-elements :before and :after, which I do not fully understand, especially their function in this scenario.

CODE: http://codepen.io/anon/pen/bdeXWQ

Thanks so much. Don’t get shot and killed.

Too much.

• jd42

[jd42]

Sorry to double-post. Do I need to add more information or explain something more clearly?

Thank you.

[Author]

Posts