Bootstrap导航栏折叠异常除外的链接

Question

Hello I want to make a float none in my application scss for all the a href from the navbar with the exception of the navbar-brand which is the "Home".

This is my application.html.erb:

  <nav class="navbar navbar-default navbar-custom"> <div class="container"> <%= link_to "Home", root_path, class: "navbar-brand" %> <button class="navbar-toggle" data-toggle= "collapse" data-target=".navHeaderCollapse" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse" > <ul class="nav navbar-nav" id="top"> <li><%= link_to "Products", products_path %></li> <li><%= link_to "About the website", about_path %></li> </ul> <ul class="nav navbar-nav navbar-right"> <!-- the pull-right is like a float right --> <% if user_signed_in? %> <li><a><span class="current_user"> Current user: <%= @username %> </span></a></li> <li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li> <% else %> <li><a class="nav-link" data-toggle="modal" data-target="#login-modal">Log in</a></li> <li><a class="nav-link" data-toggle="modal" data-target="#signup-modal">Sign up</a></li> <% end %> </ul> </div> </div> </nav> 

And this is my application.scss:

 @media (max-width: 769px) { #top{ padding-top: 40px; } } @media (max-width: 769px) { a:not(.navbar-brand){ padding-top: 40px; float: none!important; } } 

The thing is that if I type:

 @media (max-width: 769px) { a{ padding-top: 40px; float: none!important; } } 

It does what I want, by putting float none it works like kind of float left aligning all the a href to the left. BUT, as I said, I don't want it to do the same with the Home a href that has the class navbar-brand. That's the reason why I've tried with no success the a:not(.navbar-brand).

Answer 1

You can add a separate rule for your Home menu item with class navbar-brand .

@media (max-width: 769px) {
        a {
            float: none;
        }
        .navbar-brand {
            float: left;
        }
    }