Search code examples
jquerytwitter-bootstraphamlmiddleman

Switching Between Pages Using Navbar Is 'jumpy'

Im having a problem with the 'jumpyness' of the switching between pages when using middleman. To see what i mean see the

Live Demo

The problem is when i switch between pages there is a flash of another page that appears to be some kind of bullet point list.

Does anyone know how to fix this ?

Here is the link to the navigation code it uses:

%nav.navbar.navbar-default{:role => "navigation"}
  .container
    / Brand and toggle get grouped for better mobile display
    .navbar-header
      %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      / navbar-brand is hidden on larger screens, but visible when the menu is collapsed
      %a.navbar-brand{:href => "/"} Mellow Miles
    / Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/"} Home
        %li.dropdown
          %a.dropdown-toggle{"aria-expanded" => "false", "data-toggle" => "dropdown", :href => "#", :role => "button"}
            Bikes
            %span.caret
          %ul.dropdown-menu{:role => "menu"}
            %li
              %a{:href => "/page/racing_bikes.html"} Racing bikes
            %li.divider
            %li
              %a{:href => "/page/mountain_bikes.html"} Mountain bikes
            %li.divider
            %li
              %a{:href => "/page/children_bikes.html"} Children's bikes
            %li.divider
            %li
              %a{:href => "/page/folding_bikes.html"} Folding Bikes
            %li.divider
            %li
              %a{:href => "/page/town_bikes.html"} Town bikes
        %li
          %a{:href => "/page/accessories.html"} Accessories
        %li
          %a{:href => "/page/servicing.html"} Servicing
        %li
          %a{:href => "/page/contact.html"} Contact Us
Solution

  • You appear to be including your CSS files at the bottom of the page inside the <body> tag. CSS should be imported inside the <head> tag. Because you are not doing this, the page is rendered before the CSS has been loaded and applied and you are therefore seeing this FUOC (flash of unstyled content).