STREETS IN TIME: Responsive navigation menu

I have used media queries set to max-width:720px so that on mobile devices the navigation png buttons are not displayed, but instead a fixed navigation bar is displayed (fixed) at the bottom of the screen.  Also the title menu items (home / locations / about) disappear and the logo moves to a central position:

Desktop:

Image

MOBILE:

Image

The main image is set to a % width (with a max-width in place) and is therefore fully responsive to viewing device.

For pages where the orientation of the main image is portrait, I have to add inline styling to the container div setting a max-width of 550px to stop the image becoming oversized.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s