Im having a problem with the 'jumpyness' of the switching between pages when using middleman. To see what i mean see the
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
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).
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments