在滚动中的Rails应用程序中缩小Bootstrap导航栏

Question

I'm trying to shrink a bootstrap navbar in an Rails app.. I want the solution to be similar to the navbar on this page http://www.viegandmaagoe.dk/en/

I'm not sure what I'm doing wrong but my navbar isn't shrinking on scroll.

here is the code for the

app/application/_navbar.html.erb

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Circular</a>-->
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->

Here is the code in the app/assets/javascript/application.js

$(document).scroll(function() {
 if ($(document).scrollTop() > 50) {
 $('nav').addClass('shrink');
 } else {
 $('nav').removeClass('shrink');
 }
});

And here is the Css in app/assets/stylesheets/navbar.scss

nav.navbar{
 background-color:#fff;
 // Animation
 -webkit-transition: all 0.4s ease;
 transition: all 0.4s ease;
}


nav.navbar.shrink {
 min-height: 35px;
}

It would be so nice if someone could take a look at this and advise me

thanks in advance

Answer 1

You are missing closing </nav> and </div> tags at the end of your partial. It will work if you close it:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Circular</a>-->
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><%=link_to "About", root_path(@root, :anchor => "about") %><span class="sr-only">(current)</span></li>
    <li><%=link_to "Ems", root_path(@root, :anchor => "ems") %></li>
    <li><%=link_to "Team", root_path(@root, :anchor => "team") %></li>
    <li><%=link_to "Contact", root_path(@root, :anchor => "contact") %></li>
  </ul>

</div><!-- /.navbar-collapse -->
</div>
</nav>

Answer 2

Here you can find the clean scss code. The snippet in the answer uses the fully prefixed css result (you shouldn't need it if you run your code through either grunt or gulp .

If it doesn't work for you, perhaps you should create an example showing how your current non-shrinked navbar looks like, so I can see what properties I need to animate in order for the shrink-ing transition to work.

 $(document).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); } else { $('nav').removeClass('shrink'); } }); 

  body { min-height: 150vh; } .navbar-brand img { max-height: 120px; -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .navbar-default.shrink .navbar-brand img { max-height: 45px; } @media (max-width: 767px) { .navbar-brand { float: none; display: inline-block; padding: 0 15px; } .navbar-brand img { max-height: 45px; display: inline-block; margin: 15px auto; } } .navbar-default .navbar-nav > li > a { line-height: 120px; -webkit-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 768px) { .navbar-default .navbar-nav > li > a { line-height: initial; } } .navbar-default.shrink .navbar-nav > li > a { line-height: 45px; } @media (max-width: 768px) { .navbar-default.shrink .navbar-nav > li > a { line-height: initial; } } @media (max-width: 767px) { .navbar-default .navbar-toggle { margin: 20px 8px; } } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="https://www.grouptravelvideos.com/images/client/00954/resources/you%20logo%20here.png" /></a> <!-- Brand and toggle get grouped for better mobile display --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="/about"><span class="sr-only">(current))</span>About</a></li> <li><a href="/ems">Ems</a></li> <li><a href="/team">Team</a></li> <li><a href="/contact">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </nav>