Back in April, I posted about creating JWS.app and I knew at the time that there were issues with it. This new “Fixing JWS.app” series is all about addressing those issues. The first thing that we are fixing is the nav bar. Let’s look at what we are dealing with.
See the Pen
JWS.app – Header (Before) by Joe Steinbring (@steinbring)
on CodePen.
JWS.app only has the one page so it predominantly just points to anchors on the page. If you view it on the desktop, it looks like this …
If you are using Google Chrome and you open the console, you can click on “Toggle Device Toolbar”.
Once you do that, the problem becomes evident.
There is one media rule that removes the social buttons when the width of the screen gets below 620px. The issue is now that when the screen size gets below 473px, the menu wraps to the next line.
So, how can we fix that?
See the Pen
JWS.app – Header (After – Option 1) by Joe Steinbring (@steinbring)
on CodePen.
In the above example, we added an H1 that contains the name of the site. If the screen size is below 473px, we center it above the menu, center the list items, and hide the first LI.
There is a little bit of excessive repetition in this technique (the name of the site is in two places). Fixing that might need to wait for a future post, though.
So, what if we want to build enough room for more than 4 links? We could try using a hamburger menu.
See the Pen
JWS.app – Header (After – Option 2) by Joe Steinbring (@steinbring)
on CodePen.
This option has the benefit of allowing more menu items but it requires the user to need to know what the hamburger icon is.
Have a question, comment, or suggestion? Feel free to drop a comment below.
[ Cover photo by Anastasia Petrova on Unsplash ]