The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Mobile Navigation Menu and the War on CSS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #202563

    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: It is currently in shambles due to some jQuery troubleshooting and various other problems.


    So I’ve been following this tutorial:

    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.


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

    Too much.

    • jd42

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

    Thank you.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.