title: Navbar highlight for current page
body: <p>I was wondering how I would add the ability to add a highlight box the nav bar on the page your currently on. You know so people know what page their on.</p>
  
  <p>Very much like this site with the white box on the active page:<a href="https://woodycraft.net/home/" rel="noreferrer">https://woodycraft.net/home/</a></p>
  
  <p>Here is the CSS for my nav bar:</p>
  
  <pre><code>/*TOP NAV BAR SECTION*/
  
  *{margin: 0px;
    padding: 0px;}
  
  #nav_bar {background-color: #a22b2f;
            box-shadow: 0px 2px 10px;
            height: 45px;
            text-align: center;}
  
  #nav_bar &gt; ul &gt; li {display: inline-block;}
  
  #nav_bar ul &gt; li &gt; a {color: white;
                        display: block;
                        text-decoration: none;
                        font-weight: bold;
                        padding-left: 10px;
                        padding-right: 10px;
                        line-height: 45px;}
  
  #nav_bar ul li ul {display: none;
                     list-style: none;
                     position: absolute;
                     background: #e2e2e2;
                     box-shadow: 0px 2px 10px;
                     text-align: left;}
  
  #nav_bar ul li a:hover {background: #8e262a;}
  
  
  #nav_bar a:active {background: white;}
  
  #nav_bar ul li:hover ul {display: block;}
  
  #nav_bar ul li ul li a {color: #252525;
                          display: block;}
  
  #nav_bar ul li ul li a:hover {background: #4485f5;
                                color: #fff;}
  </code></pre>
  
  <p>Here is the HTML for one of my pages:</p>
  
  <pre><code>&lt;!--TOP NAV BAR SECTION--&gt;
  
                  &lt;div id="nav_bar"&gt;
                                  &lt;ul&gt;
                                    &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="status.html"&gt;Status&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="info.html"&gt;Info&lt;/a&gt;&lt;/li&gt;
  
                                    &lt;li&gt;&lt;a href="#"&gt;Gamemodes&lt;/a&gt;                                      
                                  &lt;ul&gt;
                                    &lt;li&gt;&lt;a href="survival.html"&gt;Survival&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="pure-pvp.html"&gt;Pure-PVP&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="gamesworld.html"&gt;Gamesworld&lt;/a&gt;&lt;/li&gt;
                                 &lt;/ul&gt;
                                    &lt;/li&gt;                                    
  
                                    &lt;li&gt;&lt;a href="rules.html"&gt;Rules&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="vote.html"&gt;Vote&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                                 &lt;/ul&gt;
                             &lt;/div&gt;
  </code></pre>