iBird Rose

это из за кодировки при компилировании sass. чтобы не мучаться - делай тире через блок

&:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 1px;
	background: #000;
	position: absolute;
	left: 0;
}

если хочешь чтобы функция не затрагивала другие элементы - внутри функции работай только с this.
https://jsfiddle.net/2vnsjyp1/

body {cursor: pointer;}
.container {cursor: default;}

https://jsfiddle.net/vheh7y8t/2/

a {
    left: 50%;
    transform: translateX(-50%);
}

он и не нужен. BrowserSync это просто альтернатива LiveReload. можешь юзать либо то, либо другое. на свое усмотрение.

потому что блок не внутри ссылки, а ниже в DOM. в общем сделай ховер так .user-bar__active:hover + .user-bar__drop-list {
или так
.user-bar__active:hover ~ .user-bar__drop-list {

такой код будет правильнее:

<div class="container">
   <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8">
                    <div class="wr">test</div>
                </div>

                <div class="col-md-4">
                    <div class="wr">test</div>
                </div>
            </div>
        </div>
    </div>
</div>

.wr {padding-left: 30px; padding-right: 30px;}

во-первых у тебя ошибка в css .center {marginE:0px auto;}
ты не сможешь отцентрировать float:left элементы внутри блока. ну а если все же хочешь чтобы были отцентрированы, то верстай через inline-block; к примеру так:
https://jsfiddle.net/xsd5fveg/1/

$(window).scroll(function() {
	if ( $(this).scrollTop() > $('твой_якорь').offset().top ) {
		$('блок который нужно скрыть').css('display', 'none');
	} else {
		$('блок который нужно скрыть').css('display', 'block');
	}
});

ну тк ты сам задал для него

#bs-example-navbar-collapse-1 {
    display: inline-block!important;

вот оно у тебя всегда и показывается