Sitecore 8 Experience Editor Nav Bar disappear when scrolling

One weird issue we had today, which I am surprise we did not picked it up earlier is:

Where is the Children on the Nav Bar??
when opening the page and try to navigate, it all looks fine:

But then when starting to scroll down the page then trying to navigate again... it all disappear:

Well that is caused by the breadcrumb beeing positioned absolute instead of fixed. It has been reported as a bug with the reference 428971 and the workaround provided for the issue is to update 2 files;

\Website\sitecore\shell\client\Sitecore\Speak\Ribbon\Controls\Breadcrumb\Breadcrumb.js

\Website\sitecore\shell\client\Sitecore\Speak\Ribbon\Controls\LargeDropDownButton\LargeDropDownButton.js

For whoever needs this fix, please let me know and I will send you those 2 files...

Cheers

Bootstrap... Experience editor few fixes

I am sure you all love Bootstrap. We are using the framework quite a lot here and save us quite a lots of time in development for Responsive. It offers banner carousel and plenty of other things that gives you a good quick and easy start... If you don't know it yet, you can check it out: http://getbootstrap.com/
Another great thing about it is it works with Sass and Less.

Well one thing I noticed when putting it all into Sitecore 8 is that the some element on the Experience Editor was a little off. For instance, on the Nav Bar when selecting a child page you will see the following:

There is also a few missaligned buttons, and the Add Here buttons when selecting "Components" are displaying a little funny:

Well those are not really too annoying as it does not affect the functionalities but it make the User experience a bit better. So a quick solution is to create a specific Stylesheet for the Experience Editor in which we will be able to add any style specific for displaying the pages on the experience editor. Having those in a separate Stylesheet will means that those will not increase the size of the CSS file for the Live website. Well not that this file will be too big though. So here we go:

The first thing to do is to create a CSS file:

Now on our layout, lets make sure this file is loaded only when the page is in Editor mode

All good, well know what can we put in there to make it better in Experience editor:

.scInsertionHandleCenter{box-sizing: content-box !important;  -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; }
.scInsertionHandleCenter,.sc-breadcrumb .sc-breadcrumb-item-path, .sc-breadcrumb-item-path img, .scChromeCommand{  -webkit-box-sizing: initial;  -moz-box-sizing: initial;  box-sizing: initial;}
.sc-breadcrumb-item-path img{vertical-align: initial;}
.sc-breadcrumb-item-path span{font-size: 12px; }