Изображение начальной загрузки прикреплено к верхней части экрана

CSS navbar-fixed-top использует абсолютное позиционирование, чтобы поставить его на первое место. Использование абсолютного позиционирования в css не подталкивает другие контейнеры ниже себя, а просто позиционирует себя над ними.

Если вы хотите переместить следующий div вниз, вы можете добавить к нему отступ или маржу, равную высоте навигационной панели, если вы это знаете, или используя относительное позиционирование вместо абсолютного.

Просмотр Inspect этого примера начальной загрузки может помочь вам понять https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/. Обратите внимание, что тег body в примере с фиксированным верхом имеет верхнее заполнение. В примере со статическим верхом body не имеет верхнего отступа, потому что панель навигации размещается с использованием относительного позиционирования вместо абсолютного.

Я думаю, вам нужно установить свой класс в элементе nav следующим образом:

<nav class = "navbar navbar-default navbar-fixed-top">

и добавьте следующий CSS

body { padding-top: 70px; }

(на документы: https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top)

См. Демонстрацию ниже:

.body {
  padding-top: 70px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel = "stylesheet" />
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" />


<nav class = "navbar navbar-default navbar-fixed-top">
  <div class = "container-fluid">
    <ul class = "nav navbar-nav" id = "mainNav">
      <li><a href = "###">Locations</a></li>
      <li><a href = "###">Special Events</a></li>
      <li><a href = "###">Breakfast</a></li>
      <li><a href = "###">Lunch</a></li>
      <li><a href = "###" class = "active">Liam's Food Fusion</a></li>
      <li><a href = "###">Dinner</a></li>
      <li><a href = "###">Apps and Extras</a></li>
      <li><a href = "###">Online Ordering</a></li>
      <li><a href = "###">Contact Us</a></li>
    </ul>
  </div>
</nav>
<!--    end navigation  -->

<div class = "container-fluid">
  <div class = "row">
    <div class = "col-md-4">
      <img src = "https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>

Поскольку панель навигации использует класс «navbar-fixed-top», он является фиксированным и, следовательно, не влияет на размещение других элементов. Что вам нужно сделать, так это добавить поле вверху изображения или одного из его контейнеров. Кроме того, я совершенно уверен, что вам не нужна внешняя панель навигации, это может кое-что испортить.

position:fixed, который есть у класса navbar-fixed-top, заставляет элемент nav размещать выше (подумайте, 3D) все на странице. Итак, что происходит с изображением, так это то, что оно находится в верхней части страницы с навигационной панелью наверху.

Таким образом, вы можете просто удалить класс .navbar-fixed-top из элемента nav или добавить верхний край к div, окружающему контент, следующий за панелью навигации (в данном случае <div class = "row">.

Вот Codepen с примером.