I am making a custom responsive menu. And have two links logout and website front on my menu which I need to float right. When in desktop mode to the other side. I have tried float right but can not get them both aligned.
When mobile view i need the floated right links to just be normal vertical.
You can view it here example: http://codepen.io/riwakawebsitedesigns/pen/GgLjmL and http://codepen.io/riwakawebsitedesigns/full/GgLjmL/
What would be the best way.
HTML
<div class="container-menu">
<a class="toggleMenu" href="#">Menu</a>
<ul id="menu">
<li><a href="">Dashboard</a></li>
<li><a href="#">Catalog</a>
<ul>
<li><a href="">Categories</a></li>
<li><a href="">Categories</a></li>
</ul>
</li>
<li><a href="#">Extensions</a>
<ul>
<li><a href="">Modules</a></li>
</ul>
</li>
<li><a href="#">Sales</a>
<ul>
<li><a href="#" class="top">Customers</a>
<ul>
<li><a href="#">Customers</a></li>
<li><a href="#">Customer Group</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">System</a>
<ul>
<li><a href="">Setting</a></li>
<li><a href="#" class="top">Design</a>
<ul>
<li><a href="#">Layouts</a></li>
<li><a href="#">Banners</a></li>
</ul>
</li>
<li><a href="#" class="top">Users</a>
<ul>
<li><a href="#">User</a></li>
<li><a href="#">User Group</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Website Front</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
<div class="container-fluid">
<div class="row" style="margin-top: 10px;">
<div class="col-lg-12">
<div class="alert alert-danger">Test</div>
</div>
</div>
</div>
CSS
body,
#menu,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
.container-menu {
width: 100%;
margin: 0 auto;
}
.right {
float: right;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
#menu {
list-style: none;
*zoom: 1;
background: rgba(0,0,0,1);
background: rgba(19,19,19,1);
background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));
background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#1c1c1c', GradientType=0 );
}
#menu:before,
#menu:after {
content: " ";
display: table;
}
#menu:after {
clear: both;
}
#menu ul {
list-style: none;
}
#menu a {
padding: 10px 15px;
color:#fff;
text-decoration: none
}
#menu li {
position: relative;
}
#menu > li {
float: left;
}
#menu > li > a {
display: block;
}
#menu li ul {
position: absolute;
left: -9999px;
}
#menu > li.hover > ul {
left: 0;
}
#menu li li.hover ul {
left: 100%;
top: 0;
}
#menu ul .top {
background-image: url('./images/arrow-right.png');
background-position: 95% center;
background-repeat:no-repeat;
}
#menu li li a {
display: block;
background: black; /* A grey background */
opacity: 0.7; /* 80% opacity */
position: relative;
z-index:100;
width: 147px;
}
#menu li li li a {
background: black; /* A grey background */
opacity: 0.7; /* 80% opacity */
z-index:200;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
#menu > li {
float: none;
}
#menu li li a {
width: 100%;
}
#menu ul {
display: block;
width: 100%;
}
#menu > li.hover > ul , #menu li li.hover ul {
position: static;
}
}
