Navbar effect similar to Twitter

Question

How do I get this effect on navbar? It’s present on Twitter.

When the page is in the home, there is a blue bar in the page name in the navbar, the same applies to other pages;

Answer 1

So that the embroidery does not affect the other elements you can make use of the box-sizing: border-box; if using a fixed height and you want the animated effect (which are usually in the profiles) use transition: combined with border-bottom-width:

Thus:

/*Remove margens da página*/
html, body {
    padding: 0;
    margin: 0;
}

/*sombra no navbar*/
.navbar {
     box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/*coloca os links lado a lado*/
.navbar a {
    float: left;
    padding: 15px;
    height: 46px;
    text-decoration: none;
    border-bottom: 0 #f00 solid;
    box-sizing: border-box;
    transition: border-bottom-width .2s;
}

/*faz com que o navbar acompanhe a altura dos links*/
.navbar::after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}

/*adiciona bordar em baixo se o link estiver com foco ou tiver a classe*/
.navbar a:focus, .navbar a:hover, .navbar a.actived {
    border-bottom-width: 4px;
}

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">Tweets</a>
    <a href="#">About</a>
</nav>

About the box-Sizing property

The property is supported by browsers:

• Internet Explorer 8 or higher
• Safari 3.1 to version 5 if you use prefix -webkit-
• Safari 5.1 or higher with no prefix required
• Android browser 2.1 up to version 3 if you use prefix -webkit-
• Blackberry 7 if you use prefix -webkit-
• The prefix -moz- was only needed until version 28 of Firefox

The supported values are:

• content-box

  This is the default value, as specified by the CSS standard. The properties width (width) and height (height) are measured including only the content, but not the padding, border or margin. Note: padding, border and margin will be outside the box, for example.: If .box {width: 350px} then if you apply a property {border: 10px solid black;} the rendered result in the browser (browser) will be .box {width: 370px;}

• border-box

  The width properties (width) and tall (height) include the size padding and the property border, but do not include property margin.

• padding box

  The width properties (width) and tall (height) include the size padding, but do not include property border and margin.

  This value is only supported by Gecko-based browsers such as Firefox