title: CSS / HTML How do I add a 'title' to my menu bar?
body: <p>I'm using a menu bar, which I will link the code to below. I was wondering if there was a way which I could add the name of my website to the very left of the menu bar, like a title, thanks.</p>
  
  <p>Menu bar code:</p>
  
  <pre><code>&lt;nav role='navigation'&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Undefined&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Undefined&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Undefined&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;  
  &lt;style type="text/css" &gt;
  
  @import url(http://fonts.googleapis.com/css?family=Lato);
  
  *, *:before, *:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
  }
  
  /*| Navigation |*/
  
  nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.1);
    z-index: 111
  }
    nav ul{
      list-style: none;
      position: relative;
      float: right;
      margin-right: 100px;
      display: inline-table;
    }
      nav ul li{
        float: left;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
      }
  
      nav ul li:hover{background: rgba(0,0,0,.15);}
      nav ul li:hover &gt; ul{display: block;}
      nav ul li{
        float: left;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
      }
        nav ul li a{
          display: block; 
          padding: 30px 20px;
          color: #222; 
          font-size: .9em;
          letter-spacing: 1px;
          text-decoration: none;
          text-transform: uppercase;
        }
        nav ul ul{
          display: none;
          background: #fff;
          position: absolute; 
          top: 100%;
          box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
          border: 1px solid rgba(0,0,0,.1);
        }
          nav ul ul li{float: none; position: relative;}
            nav ul ul li a {
              padding: 15px 30px; 
              border-bottom: 1px solid rgba(0,0,0,.05);
            }
            nav ul ul ul {
              position: absolute; 
              left: 100%; 
              top:0;
            } 
  &lt;/style&gt;
  </code></pre>