Is there a way to align my navicon menu button to the right edge of the wrapper div on screens smaller than 768px without causing it to float outside of the wrapper? Currently, when I try to move the navicon button to the right side using floating, it appears correctly but ends up outside the wrapper, leading to a buggy user experience. Any suggestions on how to fix this?
JSFiddle: Floating navicon to right side of wrapper
HTML:
<div class="wrapper">
<div class="nav-wrapper">
<a href="#" id="logo">THIS IS A LOGO</a>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #cecece;
}
.wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
}
#logo {
width: 200px;
}
#nav {
width: 100%;
}
li {
}
li:last-child {
border-right:none;
}
li a {
display: block;
width:100%;
background:#000;
color: #fff;
font-size:1.35em;
text-decoration: none;
margin-top: 5px;
}
@media screen and (max-width: 768px) {
.wrapper {
width: 100%;
}
#menu {
width:1.4em;
display: block;
background:#ddd;
font-size:1.35em;
text-align: center;
}
#logo {
float: none;
}
#nav.js {
display: none;
}
ul {
width:100%;
list-style:none;
}
li {
width:100%;
border-right:none;
}
}
@media screen and (min-width: 768px) {
#nav-wrapper {
background-color: #fff;
overflow-x: visible;
width: 100%;
background-repeat: repeat;
}
#logo {
float: left;
}
ul {
width:100%;
overflow: visible;
background-color: #fff;
height: 40px;
}
li {
display: inline-block;
padding: 0 20px;
}
#menu {
display: none;
}
}
jQuery:
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});