having trouble floating this menu icon to the right of my navbar

Question

I'm trying to make a simple responsive navbar with a mobile menu and I can't for the life of me figure this out. This should be simple but I'm really out of practice with this stuff, so it's not for me. I'm trying to make a responsive nav menu that has a menu icon that is aligned to the right of the navbar. I'll just post everything on codepen here http://codepen.io/rustinpeace91/pen/JRaRyO?editors=1100

The obvious answer seems to be

.menu-icon-1{
  display:block;
  float:right;
 }

this doesn't work. I don't think it's a specificity issue either. When I hit inspect element it applies to the icon, but it's not floating it to the right.

score 0 · Answer 1 · edited May 23 '17 at 12:06

You are floating the content of the list item. You need to float the li tag itself. Just add the menu-icon-1 class to the li instead of the a tag.

After that the navbar may seem to disappear on mobile view. This is because you will only have one visible element on it, and this element will be floating, which will make the ul container have height = 0. To avoid that you will need to add a clearfix.

Here is the fixed version http://codepen.io/lazamar/pen/XjPjya

score 0 · Accepted Answer · answered Oct 16 '16 at 13:26

You need to remove the menu icon out of the ul->li and have it on its own.

.menu-icon-1{
  float: right;
}

<nav class="header">
  <ul class="main-nav">
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
    <li></li>
  </ul>
  <a href="#" class="menu-icon-1">☰ menu</a>
</nav>

score 0 · Answer 3 · answered Oct 16 '16 at 14:40

applying a float:right on an Element will take the element out from the normal position (think of it like position:absolute with some differences).

If we apply a float:right to that ul tag with class main-nav. the navigation container will collapse.

The snap below shows the float container hidden due to the nav adjusting its height to 0.

For a quick solution, I believe adjusting the height of the nav to show that ul tag will work

.header {
    background-color: #900000;
    height:50px
}

snippet here

snippet below

/*CSS RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
em, font, img, ins, kbd, q, s, samp, small,
 strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, 
 ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, 
 thead, tr, th, td {margin:0; padding:0; 
 border:0; outline:0; font-size:100%; vertical-align:baseline; 
 background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, 
 q{quotes:none;} blockquote:before, blockquote:after, q:before,
 q:after{content:'';content:none;} :focus{outline:0;} 
 ins{text-decoration:none;} del{text-decoration:line-through;} 
 table{border-collapse:collapse; border-spacing:0;}

 /*MAIN*/

 body {
  font-family:"Helvetica Neue",Helvetica, Arial;
 background: #f9f9f9;
 color: #555;
 }

 a{
  text-decoration:none;
  font-weight:bold;
  color:white;
 }

/*HEADER*/

.header {
   background-color:#900000;
   height:50px;
}



ul.main-nav li {
  display:inline-block;
  line-height:48px;
  margin-left:20px;
}

nav ul a:hover{
  background:#E6E6E6;
  color:black;
    padding:14px 0px 15px 0px;
}

.menu-icon-1{
  display:none;
}

@media screen and (max-width:600px) {
  ul.main-nav li:not(:last-child){
    display:none;
  }
  .menu-icon-1{
    display:block;
    line-height:46px;
    float:right;
  }
  
  a.menu-icon-1:hover {
   line-height:18px;
  }
  
}
.main-nav{
float:right;
}

<html>

<head>
  <title>Bob the fixing guy</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/b0aacd6f67.js"></script>
</head>

<body>
  <nav class="header">
    <ul class="main-nav">
      <li><a href="#" class="current">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Videos</a>
      </li>
      <li><a href="#">Pricing</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#" class="menu-icon-1">&#9776; menu</a>
      </li>
    </ul>
  </nav>
  <img src="images/bobtitle.jpg" class="header-image" width="100%">

  <div class="content">
    <p>The C&O fully absorbed the Pere Marquette Railway in 1947, inheriting the car ferry service already established in Ludington. The division became known as the "Pere Marquette District" of the C&O railroad. There were already several car ferries working
      out of Ludington at the time, including the Pere Marquette 21 and Pere Marquette 22, the City of Saginaw 31 and City of Flint 32, and the City of Midland 41. C&O decided to improve its ferry fleet by adding two new ships. While similar in design
      to the immensely popular City of Midland 41, the new ships would have several notable design changes, such as a full-width pilot house that gave the crew an almost 360-degree view, and new lifeboat davits that freed up deck space.</p>

    <p>Hull 369, which would become the Spartan began construction in late 1950 by the Christy Corporation of Sturgeon Bay, Wisconsin. She was launched on 4 January 1952 without fanfare; the Badger was being built at the same time, and the owners preferred
      a double-christening ceremony. During construction, many cities on both sides of Lake Michigan lobbied for their names to go on the new ships, as was the tradition with previous Pere Marquette car ferries (i.e. City of Midland 41). C&O decided that
      fewer feelings would be hurt if the twin ferries were named Spartan and Badger, after the mascots of Michigan State University (then Michigan State College) and the University of Wisconsin. The ships were christened on 6 September 1952 after the
      Badger was successfully launched. The Spartan completed her sea trials on 27 September 1952 and was delivered to C&O on 23 October. She immediately began work for the C&O, operating from her home port of Ludington.</p>
  </div>
</body>

having trouble floating this menu icon to the right of my navbar

3 Answers3