CSS начальной загрузки заполнить левую часть навигации

Question

В настоящее время мне нужно реализовать сложный стиль навигации.

Мне удалось упростить задачу, чтобы показать только часть HTML.
Проблема в том, что я не могу коснуться HTML-кода.

Вот код (простой начальный загрузчик):
https://jsfiddle.net/5y4asdef/

Я хочу заполнить пространство слева от «Имя приложения», например, белым цветом, чтобы работать на всех разрешениях, особенно (шире)

Я пробовал что-то вроде этого:

.navbar-header:after {
    content: " ";
    background-color: white;
    width: 110px;
    height: 80px;
    display: block;
    position: absolute;
    left:  0px;
    top: 0;
}

Я пытался комбинировать некоторые свойства фона, но не мог понять, как его применить.

Я хочу убедиться, что независимо от того, как долго экран будет работать:
https://jsfiddle.net/5y4asdef/show (fullscreen)

Answer 1

Вот мое некачественное решение на данный момент:

.navbar-header {
  position: relative;
}

.navbar-header:after {
    content: " ";
    background-color: white;
    width: 1000px;
    height: 80px;
    display: block;
    position: absolute;
    left: -1000px;
    top: -6px;
}

Answer 2

Используйте .контейнер-флюид класс вместо .контейнер

Вот обновленный фрагмент:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <a class="navbar-brand" href="/">Application name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
      </ul>
    </div>
  </div>
</div>