Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Manipular itens em um Menu

Não é uma duvida sobre nenhuma aula em si, só queria entender melhor o uso do bootstrap.

Assim, como eu faço um menu e manipulo as coisas dele?

Vim tentando fazer isso conforme vou assistindo o curso, mais pra entender e conseguir usar os elementos que aprendo, só que estou tendo dificuldades por exemplo pra posicionar um link onde eu quero nesse menu, só consigo posicionar ele em extremos,sabe? ou muito a direita ou muito a esquerda

4 respostas

Gustavo, mande um print da solução à qual você chegou e o código que gerou isso pra gente poder ter uma idéia melhor de como te ajudar =)

Olha, meu código está assim:

<section id="menu">

<div id="menu2" class="container">
  <nav id="menu3" class="navbar navbar-form">
    <div class="container-fluid">
      <div id="menuheader" class="navbar-header">

        <img id="imglogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo">

        </div>

            <div id="navbar2">
                  <ul id="navbarmenu" class="nav navbar-nav">

                          <li><a style="padding-top: 19px;" href="#" visibility="hidden">ENTENDA</a></li>
                          <li><a style="padding-top: 19px" href="#">SEM JUROS  | </a></li>
                          <li><a id="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>

                  <a href="#Contato-Site" button id="contatobutton" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" >  CONTATO
                  </a></button>
          </ul>
        </div>


</div>

    </nav>
  </div>
</section>

https://scontent-gru2-2.xx.fbcdn.net/v/t31.0-8/18527256_1515109495231098_3702720370107299212_o.jpg?oh=45b02cb8818a8a1df4094070c8f9873e&oe=59BB992B

Até consegui fazer o menu ficar mais ou menos como eu queria, mas ele não tá nada legal, Quando testo por uma tela de celular por exemplo, ele fica todo fora de ordem, fica horrível.

solução!

Se por manipular as coisas no menu você quis dizer reposicioná-las, você precisa alterar o estilo desses itens adicionando margens, padding, bordas, etc. Aí depende da sua intenção final então não posso te ajudar com nada específico.

A princípio é isso. Mas olha, umas coisas que eu reparei que podem estar quebrando seu menu:

  1. O divisor está sendo gerado em texto (SEM JUROS |). Ele é um elemento de estilo então deveria ser gerado por CSS. Uma borda ou algo assim, que você pode manipular para sumir no celular.
  2. Não é bom que seu estilo seja definido no próprio elemento (style="etc"). Seria melhor criar uma classe pra ele, pra poder manipular usando media queries. Se quer um código organizado, é o melhor a fazer. Dá pra fazer no style, mas não aconselho. A tag <style> no início da página já é melhor, e melhor ainda é criar seu próprio arquivo CSS e importá-lo depois do bootstrap.
  3. O botão de contato não está dentro de uma li, o que deve estar confundindo seu navegador.

Existe um curso para posicionamento que eu recomendo muito aqui na alura, se chama "Flexbox" dê uma olhada nele.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software