title: Bootstrap Mobile Menu Opens Behind Brand Img (Using Z Index for Content, Which Works, But not For Oversized Brand IMG)
body: <p>The site: www.itsolvedmd.com</p>
  
  <p>In mobile view, I cannot get the toggle menu to sit in front of the brand image. Ideally, I'd like to somehow margin or pad the menu to be at the same height of my brand image's bottom edge.</p>
  
  <p>Also, in desktop viewports I'd like my link text to be bigger which I cannot seem to accomplish either.</p>
  
  <p>My CSS:</p>
  
  <pre><code>.navbar {
  height: 113px;
  margin-top: 15px;
  }
  .navbar-default {
  background: transparent;
  border: none;
  }
  .navbar {
  z-index: 9999;
  padding-top: 20px;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a, .navbar-default .navbar-brand {
  color: #000;}
  .navbar-default .navbar-nav &gt; li &gt; a:hover, 
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
  text-decoration: bold; 
  color: #39b54a; 
  background-color: none;}
  
  @media only screen and (max-width: 766px) {
  .collapsing, .in {background-color: #f7f7f7;}
  .collapsing ul li a, .in ul li a {color: #555!important;}
  .collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
  }
  </code></pre>