Bootstrap css, how to make always visible navbar-toggle?

前端 未结 6 2273
甜味超标
甜味超标 2021-02-13 09:07

I\'d like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven\'t been able so far, here\'s the less cod

6条回答
  •  感情败类
    2021-02-13 10:01

    After some tests I managed to obtain the desired results:

    here's the less code:

    .navbar-inverse {
    
      .navbar-toggle-always {
        border-color: @navbar-inverse-toggle-border-color;
        &:hover,
        &:focus {
          background-color: @navbar-inverse-toggle-hover-bg;
        }
        .icon-bar-always {
          background-color: @navbar-inverse-toggle-icon-bar-bg;
        }
      }
    }
    
    .navbar-toggle-always{
    
      .navbar-toggle;
    
      @media (min-width: 768px){
        display: block!important;
        background-color: transparent;
        border:1px solid #333333;
      }
    
      .zero-margins;
    
      .icon-bar-always {
        .icon-bar;
        border:1px solid #fff;
        display: block;
        border-radius: 1px;
      }
    
      .icon-bar-always + .icon-bar-always {
        margin-top: 4px;
      }
    }
    

    make sure you have at least 768px on the bottom right panel to see it:

    http://jsfiddle.net/vyzwfovr/

提交回复
热议问题