Recently, I was tasked with a project of making an existing website “mobile friendly”. As most every web developer well knows, this type of project is not an ideal circumstance for making a site display nicely on mobile and tablet devices. It’s much easier to build a responsive solution on a new website, rather than trying to put a bandage on an existing site to “make it work”. However, building a new solution isn’t always feasible, and we must adapt to each project and work with what we have at our disposal. Luckily, my project was one that I had originally authored, so I had familiarity with the code, and had a much easier time updating the necessary files.
Before reading on (or if you just want to see the full code), it may be helpful to you if you grab the demo project I created, which is available on GitHub. I’ll briefly outline some highlights of the code in my explanation of the solution below, but you’ll want to actually look at the full solution to get the best feel for how everything is styled and wired up. Plus, you can use the demo project code as a starting point in your own projects, if you so desire.
Now, let’s get to the solution…
Step 1: Add Side Navigation and Menu Bar
First, I added two main divs to each page. In my project, I had set things up relatively intelligently using PHP, so the content of the head tag and even the opening of the body tag were included in the master template that was already included on each page. This made adding these two divs a snap, requiring me to update only the one master file.
Below are the two divs I added. I put them right inside the body tag, before the main wrapper that contained all of the page content. As you’ll notice in reading on, the visibility of these two divs is based on whether or not the page is at a handheld size or not, with the side nav being toggled by means of the mobile_menu button.
<div id="side_nav_close"><div class="label">Close</div></div>
Step 2: Style the Navigation and Menu Bar Elements
Next, I added new CSS styles to account for a more responsive experience. The styles were set up so a handheld device was set using a media query with max-width of 600px. I won’t list them all of the CSS out here, but in short, here are the rules set for the CSS:
When on Tablet or Desktop Browser:
- Side nav display set to none
- Menu bar display set to none
- Nav links styled to be horizontal list with subnav shown via hover state (desktop) or on click (tablet)
- Header display set to block
When on a Handheld Device:
- Side nav display set to block
- Menu bar display set to block, with fixed position to stay at the top of the window
- Nav links styled to be vertical list with dropdown arrows for subnav
- Header display set to none
Listen for Window Size Change
Move Top Nav Links from Header to Side Nav
To do this, I added logic inside of the aforementioned window resize function that would literally move the <ul> list from the header to the side nav, and back, depending on whether or not the page was on a handheld device.
Toggling the Side Nav
Since the side nav wasn’t always supposed to be visible, I needed a way to toggle it back and forth. So, I attached a click handler to the “menu” icon (included in the fixed menu bar), which toggled the visibility of the side nav.
Enable Side Nav Subnav Menu Expansion
Enable Top Nav Links for Tablet Devices
Include “Back to Top” Button in Mobile Menu Bar
I hope you find this helpful for setting up a basic responsive navigation structure for your sites. And if you find any better or more elegant solutions, I’d love to hear about them.
Until next time, happy coding!