Can my responsive Nav be made simpler?

Question

I've created a responsive nav but feel there's probably a more simpler way of doing it.

HTML

<header>
 <a href="#" class="menu-toggle">toggle</a>
 <nav class="main-nav">
 <ul>
 <li>Link</li>
 <li>Link</li>
 <li>Link</li>
 <li>Link</li>
 <li>Link</li>
 </ul>
 </nav>
 <nav class="menu-side mobile">
 <ul>
 <li><a href="#">Link</a></li>
 <li><a href="https://www.google.co.uk/" target="_blank">Google</a></li>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 </ul>
 </nav>

CSS

ul {
 list-style: none;
 color: #000;
}
.main-nav ul li {
 display: inline;
 padding-left: 28px;
 float: right;
}
.menu-toggle {
 float: right;
}
.menu-side {
 background-color: #333;
 border-right: 1px solid black;
 color: white;
 position: fixed;
 top: 0;
 right: -231px;
 width: 210px;
 height: 100%;
 padding: 10px; 
}
.menu {
 overflow-x: hidden;
 position: relative;
 right: 0;
}
.menu-open {
 right: 231px;
}
.menu-open .menu-side {
 right: 0;
}
.menu-side,
.menu {
 -webkit-transition: right 0.2s ease;
 -moz-transition: right 0.2s ease;
 transition: right 0.2s ease;
}
@media (min-width: 700px) {
 .menu-side, .menu-toggle {
 display: none;
 }
}
 @media (max-width: 700px) {
 .main-nav {
 display: none;
 }
}

There is some jQuery to action this but I'm not concerned with this at the moment. I'm aware that SASS may simplify this but I'm not comfortable with that yet.

• cimmanon: For narrower viewports, you have a toggle link visible. What is the behavior of this link (ie. which items does it reveal)?
• TheIronDeveloper: The nav can be made considerably simpler if you remove "menu-side mobile", and instead apply the CSS from the .menu-side to .main-nav when you have '@media (max-width: 700px)' Here is an example: jsfiddle.net/TheIronDeveloper/y923vt0y/3
• user2898276: @cimmanon menu-side slides out from the left.

Answer 1

Multiple nav elements

While multiple nav elements are allowed for any given section, it looks dirty to me. Consider using a single nav instead. If you need an extra element as a style hook, then use div or section.

Duplicate content

Having content that is only visible to mobile users and similar content that's only visible for desktop users is code smell. This one is extra bad because it uses identical markup for both. Just use one set of markup and have CSS style it differently depending on the viewport.

Using px for the width of text elements

Text is not something you as a designer have any control over, all you can do is make suggestions. An element that's 210px wide might look good for text that's 16px Times, but what happens when the user has specified that they need 20px Segoe because their eyesight isn't as good as it used to be? Using em/rem is a better choice in most situations.

Using px for media queries

When you use px for your media queries, they'll fall apart when you start zooming (not sure if this is still the case). Using ems are more reliable, especially if you're following my last point.

See also: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

Redundancy

When you float an element, most display values are ignored, including inline.

.main-nav ul li {
 display: inline;
 padding-left: 28px;
 float: right;
}

On a relatively positioned element, a top/right/bottom/left value of 0 does nothing. I don't see anywhere where this is overriding a previous setting either.

.menu {
 overflow-x: hidden;
 position: relative;
 right: 0;
}