 <p><img src="https://i.stack.imgur.com/7iRd0.jpg" alt="enter image description here"></p> <p>Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.</p> <pre><code> header#top nav .sf-menu li.current_page_item &gt; a, header#top nav .sf-menu li.current-menu-item &gt; a, header#top nav .sf-menu li.current_page_item &gt; a { border-style: solid; border-bottom: thick solid #27CCC0; } </code></pre> <p>If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).</p> <p>And, Good Luck..Sorry if this is not the answer.</p>