title: I want to change my navbar font and color
body: <p>The following is my scss file</p>
  
  <pre><code>div.navbar-collapse ul.navbar-nav li {
    color: #E69D32;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
  }
  </code></pre>
  
  <p>This is my view file</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to "About Us", root_path %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to "Contact Us", root_path %&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  </code></pre>
  
  <p>But the view is still the same. not changing color and font. </p>
  
  <p><a href="https://i.stack.imgur.com/2HlgE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2HlgE.png" alt="enter image description here"></a></p>