Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Como consigo fazer um hover bold em um nav

por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web

Como consigo fazer um hover bold em um menu nav, sem que o menu se movimente quando o hover é ativado???

<nav class="navbar navbar-expand-lg">
                              <div class="collapse navbar-collapse" id="navbarNav">
                                <ul class="navbar-nav">
                                  <li class="nav-item">
                                      <a href="{root_url}blog" class="nav-link text-uppercase hover_no_underline">Biscoitos</a>
                                  </li>
                                  <li class="nav-item">
                                      <a href="{path='massas'}" class="nav-link text-uppercase hover_no_underline">Massas</a>
                                  </li>
                                  <li class="nav-item">
                                      <a href="{path='farinhas'}" class="nav-link text-uppercase hover_no_underline ">Farinhas</a>
                                  </li>
                                  <li class="nav-item">
                                      <a href="{path='delicias'}" class="nav-link text-uppercase hover_no_underline "> Delícias</a>
                                  </li>
                                </ul>
                              </div>
                              <a class="hover_no_underline hamburguer text-right abrir_menu_overlay white"><hr><hr><hr></a>
                            </nav>
nav{
            .navbar-toggler{

                background-color: $azul;
            }
            .nav-link{
                font-size: 2.2rem;
                color: $azul;
                margin: 0 2rem;
                font-weight: 300;
                    &:hover{
                        color: #e3b665;
                        font-weight: bold;
                    }
            }
        }
9 respostas
por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

você pode fazer isso:

.navbar li a:hover{
    font-weight: bold;
}

sera aplicado somente quando o cursor estiver acima do link.

por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

espero ter ajudado.

por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web

Movimentação continua nos demais itens do menu mesmo isolando o hover bold.

por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

talvez essa class "hover_no_underline" esteja fazendo isso, você pode mostrar essa class para que eu passa entender melhor?

por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web

Essa classe é uma global, para tratar os links dos comportamentos padrões

.hover_no_underline {
    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }
}
por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

Vagner dependendo do tamanho do seu nav quando colocar o texto em negrito (ele cresce um pouco) então ele empurrara o seu nav causando essa movimentação, meu conselho é que você inspecione os elementos no navegador para ver se à um padding em volta dos items. pois tentei replicar e não conseguir ver diferença alguma.

meu teste aqui:https://codepen.io/Jeferson-Natanael/pen/mxpQvE?editors=1100

espero que de alguma forma ter ajudado. :)

por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web

o menu deve ser inline

https://codepen.io/vagnertondello/pen/LdeaZM

solução!
por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

Consegui fazendo assim:

.nav-link{
    /*  AQUI ESTA A MUDANÇA    */
    display: inline-block;
    width: 120px;
    text-align: center;
    /*  --------------------    */
    font-size: 2rem;
    color: blue;
    margin: 0 2rem;
    font-weight: 300;
    text-decoration:none;
  }

meu teste:https://codepen.io/Jeferson-Natanael/pen/mxpQvE

por Vagner Kugelmeier Tondello
| 147.2k xp | 49 posts
Desenvolvedor Web

show, deixou com tamanho fixo, vlw, obrigado!