Create slide down menu responsive

I have a set of links (which have a styling that makes them look like buttons) on my site, they work properly when in a computer or tablet browser but when on smartphones I would like to turn these links (botões) into Slide Down Responsive how is this layout change (hence the html) made?

HTML code:

<header>
            <div class="container">
                <div class="row">
                    <div id="profile_information" class="col-md-8 col-md-offset-2">
                        <img id="profile_image" src="assets/images/misc/Tio-Sam.png">
                        <div id="profile_content">
                            <h1 class="nome"><strong>Nome</strong></h1>
                            <h2 class="desc">Descrição</h2>
                            <a href="#" class="social" id="email" target="_blank"></a>
                            <a href="#" class="social" id="linkedin" target="_blank"></a>
                            <a href="#" class="social" id="curriculum" target="_blank"></a>
                            <a href="#" class="social" id="github" target="_blank"></a>
                            <a href="#" class="social" id="sopt" target="_blank"></a>
                        </div>
                        <img id="claws" src="assets/images/misc/Claws.png">
                        <div id="menu">
                            <a class="btn btn-xs btn-info gray" href="index.html">Sobre mim</a>
                            <a class="btn btn-xs btn-info gray" href="conhecimentos.html">Conhecimentos</a>
                            <a class="btn btn-xs btn-info gray" href="#">Aprender e Atualizar</a>
                            <a class="btn btn-xs btn-info gray" href="contato.html">Contato</a>
                            <a class="btn btn-xs btn-info gray" href="experiencia.html">Experiência</a>
                            <a class="btn btn-xs btn-info gray" href="portfolio.html">Portfólio</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

Image of how it is on your computer:

Pictureofhowyouareinthebrowser(portrait):

Image of how it should look (portrait):

Openslidedown: