Menu icon Foundation
Responsive menu help needed by total newbie

I am working on making a static HTML site responsive. I would like to have a menu with dropdown items that adjusts to just the hamburger icon when viewed on a mobile device.

So far, I have this:

Original page - http://merilynsimonds.com/bio.html

Original with CSS dropdown sample (this is pretty much what I would like it to look like - menu only) - http://merilynsimonds.com/bio-test.html

With Foundation code - http://merilynsimonds.com/SANDBOX/bio.html. The menu has the dropdown, but has not yet been styled (although I am still working on this, so it might have changed by the time this gets looked at)

I need help as follows:

  1. making the menu change to a hamburger icon at the smallest break point and have the menu dropdown
  2. centering the menu (just haven't figured that out yet)
  3. styling the search box (something is over-riding the CSS that places the submit button to the right of the box. Haven't found that yet!

#1 is the thing that is perplexing. I'm assuming that I'll eventually be able to figure the rest out.

Any help/insight could be appreciated.

responsive menuhtml site

I am working on making a static HTML site responsive. I would like to have a menu with dropdown items that adjusts to just the hamburger icon when viewed on a mobile device.

So far, I have this:

Original page - http://merilynsimonds.com/bio.html

Original with CSS dropdown sample (this is pretty much what I would like it to look like - menu only) - http://merilynsimonds.com/bio-test.html

With Foundation code - http://merilynsimonds.com/SANDBOX/bio.html. The menu has the dropdown, but has not yet been styled (although I am still working on this, so it might have changed by the time this gets looked at)

I need help as follows:

  1. making the menu change to a hamburger icon at the smallest break point and have the menu dropdown
  2. centering the menu (just haven't figured that out yet)
  3. styling the search box (something is over-riding the CSS that places the submit button to the right of the box. Haven't found that yet!

#1 is the thing that is perplexing. I'm assuming that I'll eventually be able to figure the rest out.

Any help/insight could be appreciated.