title: Reverse Engineering a Bootstrap Menubar
body: <p>I used the website <a href="http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/" rel="nofollow noreferrer">http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/</a> (very helpful- check it out if you haven't already) to create a responsive menubar.  However, I am having trouble editing certain aspects of it because I did not create the code myself. I have attempted to reverse engineer (not sure if this term applies in coding) the code and have nine questions.  Sorry for the number of questions.  Feel free to only answer a few. I posted this last night but it was a mess, so reposting a more simple version.</p>
  
  <p>1.) How do I set a different color for the active tab of the menu?</p>
  
  <p>2.) What is a CSS selector like the following targeting?</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-brand 
  </code></pre>
  
  <p>3.) Why is there a space between the ".navbar-default" and ".navbar-brand" but not with "#custom-bootstrap-menu.navbar-default" in the above code?</p>
  
  <p>4.) Why is the background defined three times in code blocks like the following?  Is this a backup for older browsers?</p>
  
  <pre><code>   background-color: rgba(47, 196, 116, 1);
      background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
      background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
  </code></pre>
  
  <p>5.) What is the end part of the following code styling? Links that are the children of list items that are the children of class navbar-nav?</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a
  </code></pre>
  
  <p>6.) What is the point of setting a background color with complete transparency as done in the following code?</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(248, 248, 248, 0);
  </code></pre>
  
  <p>7.) Does seperating two targets with a comma simply make the code within brackets apply to both?</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:hover,
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:focus {
  </code></pre>
  
  <p>8.) In the code above I know hover is when the user places their mouse over the element.  What does focus do? The descriptions I've read are written like "when something gains focus".  What exactly does gaining focus mean?</p>
  
  <p>9.) When targeting navbar elements with the bootstrap class toggle does this mean that the changes are only made upon screen resize?</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
  #custom-bootstrap-menu.navbar-default .navbar-toggle:focus 
  </code></pre>
  
  <p>Relevant code is as follows:</p>
  
  <p>Relevant CSS</p>
  
  <pre><code>#custom-bootstrap-menu.navbar-default .navbar-brand {
      color: rgba(255, 255, 255, 1);
  }
  #custom-bootstrap-menu.navbar-default {
      font-size: 15px;
      background-color: rgba(47, 196, 116, 1);
      background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
      background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
      border-width: 1px;
      border-radius: 4px;
  }
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(248, 248, 248, 0);
  }
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:hover,
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:focus {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(68, 229, 74, 1);
  }
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;.active&gt;a,
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;.active&gt;a:hover,
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;.active&gt;a:focus {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(66, 165, 3, 1);
      background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
      background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
  }
  #custom-bootstrap-menu.navbar-default .navbar-toggle {
      border-color: #42a503;
  }
  #custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
  #custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
      background-color: #42a503;
  }
  #custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
      background-color: #42a503;
  }
  #custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
  #custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
      background-color: #2fc474;
  }
  </code></pre>
  
  <p>Relevant HTML:</p>
  
  <pre><code>    &lt;div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="#"&gt;Brand Logo&lt;/a&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse navbar-menubuilder"&gt;
              &lt;ul class="nav navbar-nav navbar-left"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/products"&gt;Products&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/about-us"&gt;About Us&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/contact"&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>