title: How to specify ids for navbar style
body: <p>I've glommed together a navbar with its own stylesheet, that works approximately like I want it to.  If I uncomment the links to stylesheets for bootstrap, however, many of its properties are overridden. Most noticeably is that the menu items are now in separate rows instead of the same.</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;title&gt;Navbar Test&lt;/title&gt;
  
  &lt;h1&gt;Navbar Test&lt;/h1&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;navbartest.css&quot;&gt;
  
  &lt;nav class=&quot;navbar&quot;&gt;  
    &lt;ul class=&quot;nav navbar-nav left-links&quot;&gt;
      &lt;li&gt;&lt;a class=&quot;links&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;dropdown links&quot;&gt;
        &lt;span&gt;Menu 1&lt;/span&gt;
        &lt;ul class=&quot;dropdown-content&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;dropdown links&quot;&gt;
        &lt;span&gt;Menu 2&lt;/span&gt;
        &lt;ul class=&quot;dropdown-content&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;dropdown links&quot;&gt;
        &lt;span&gt;Menu 3&lt;/span&gt;
        &lt;ul class=&quot;dropdown-content&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Thing 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;ul class=&quot;nav navbar-nav right-links&quot;&gt;
      &lt;li class=&quot;dropdown links&quot;&gt;
        &lt;span&gt;Welcome Brian&lt;/span&gt;
        &lt;ul class=&quot;dropdown-content&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;User Settings&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Log Out&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;!--
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;link
      rel=&quot;stylesheet&quot;
      href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
      integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot;
      crossorigin=&quot;anonymous&quot;&gt;
  
    &lt;link
      rel=&quot;stylesheet&quot;
      href=&quot;https://use.fontawesome.com/releases/v5.6.3/css/all.css&quot;
      integrity=&quot;sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/&quot;
      crossorigin=&quot;anonymous&quot;&gt;
  
    &lt;link
      rel=&quot;stylesheet&quot;
      href=&quot;https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css&quot;&gt;
  
    &lt;link
      rel=&quot;stylesheet&quot;
      type=&quot;text/css&quot;
      href=&quot;http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css&quot;&gt;
  &lt;/head&gt;
  --&gt;
  </code></pre>
  <p>And here is the stylesheet, navbartest.css:</p>
  <pre><code>html { font-family: sans-serif; background: #eee; padding: 1rem; }
  body { max-width: 960px; margin: 0 auto; background: white; }
  h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
  a { color: #377ba8; }
  hr { border: none; border-top: 1px solid lightgray; }
  
  body{
      margin:0px;
      margin-top:60px;
      padding: 0px;
  }
  
  .selected{
     border-bottom: 2px solid purple;
  }
  
  
  .content { padding: 0 1rem 1rem; }
  .content &gt; header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
  .content &gt; header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
  .flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
  .post &gt; header { display: flex; align-items: flex-end; font-size: 0.85em; }
  .post &gt; header &gt; div:first-of-type { flex: auto; }
  .post &gt; header h1 { font-size: 1.5em; margin-bottom: 0; }
  .post .about { color: slategray; font-style: italic; }
  .post .body { white-space: pre-line; }
  .content:last-child { margin-bottom: 0; }
  .content form { margin: 1em 0; display: flex; flex-direction: column; }
  .content label { font-weight: bold; margin-bottom: 0.5em; }
  .content input, .content textarea { margin-bottom: 1em; }
  .content textarea { min-height: 12em; resize: vertical; }
  input.danger { color: #cc2f2e; }
  input[type=submit] { align-self: start; min-width: 10em; }
  
  nav { background: slategray; display: flex; align-items: center; padding: 0 0.5rem; }
  nav h1 { flex: auto; margin: 0; }
  nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
  nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
  nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 10;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .left-links{
     flex:1 1 200px;
  }
  .links {
     display: inline-block;
     text-align: center;
     padding: 14px;
     color: rgb(0, 0, 0);
     text-decoration: none;
     font-size: 17px;
     font-weight: bolder;
  }
  .links:hover {
     border-bottom: 2px solid purple;
  }
  </code></pre>
  <p>I'm aware that the solution is to <a href="https://css-tricks.com/specifics-on-css-specificity/" rel="nofollow noreferrer">increase CSS specificity</a>.  I'm not sure how to do that.  If I want to give it the navbar an identifier like &quot;my-navbar&quot; so that the stylesheet doesn't get overridden, where exactly do I need to make those changes?</p>