Получить элемент фиксированной позиции, чтобы не блокировать другой контент

Question

Скажем, я создаю панель навигации с использованием элемента header:

header {
  border: 1px solid #a2a2a2;
  width: 100vw;
  height: 150px;
  position: fixed;
  top: 0;
  z-index: 1;
}

Теперь, когда пользователь прокручивает страницу вниз, панель навигации явно покрывает 150px содержимого.Есть ли способ сказать всем элементам под этой fixed панелью навигации "очистить" ее или что-то в этом роде?Чтобы панель навигации оставалась фиксированной, но не закрывала содержимое?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  height: 150px;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 1;
}


/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {
  .header,
  .main-nav {
    display: flex;
  }
  .header {
    flex-direction: column;
    align-items: center;
    .header {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

.parallex {
  background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
  background-attachment: fixed;
  height: 100vh;
}

.text-in-parallex {
  position: relative;
  top: 70vh;
  left: 28vw;
  color: white;
  font-size: 45px;
}

body {
  background-color: #EEEEEE;
  /* #EE2324 */
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 80%;
  margin: 20px auto 100px auto;
  padding-bottom: 100px;
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 3px;
  /* Shadow */
  -moz-box-shadow: 0px 3px 30px 1px #ccc;
  -webkit-box-shadow: 0px 3px 30px 1px #ccc;
  box-shadow: 10px 15px 30px 15px #ccc;
  font-family: 'Alice', serif;
}

.table-of-contents {
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.table-of-contents>h2 {
  text-align: center;
  margin-bottom: 10px;
}

.inner-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: white;
  padding: 20px 20px 25px 20px;
  border-radius: 3px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: 20px;
}

.menu-section {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 20.9368px;
  font-weight: 400;
  margin-bottom: 10px;
}

.menu-section>a {
  text-decoration: none;
  color: #999999;
  padding-left: 7px;
}

.menu-section>a:hover {
  border-left: 1px solid blue;
  color: #1f5ea9;
  text-decoration: underline;
}

.name-of-food {
  font-size: 20px;
}

.food-description {
  color: grey;
  font-style: italic;
}

.food-section {
  grid-column: 1 / 3;
  text-align: center;
  padding-top: 20px;
  font-size: 2em;
}

.food-section:nth-child(1) {
  padding-top: 0;
}

.restaurant-info {
  grid-column: 1 / 3;
  text-align: center;
  border: 1px solid lightgray;
  padding: 20px 0px;
}

#search-form {
  border-radius: 3px;
  text-align: center;
  margin-bottom: 10px;
}

#search-input {
  width: 80%;
}

.fab {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 3px;
}

.fab:hover {
  opacity: 0.7;
  cursor: pointer;
}

.fa-facebook-square {
  background: #3B5998;
  color: white;
}

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div class="menu-grid">
  <div class="restaurant-info">
    <h1>Example Pizzeria</h1>

  </div>
  <div class="table-of-contents">
    <h2>Menu</h2>
    <form id="search-form">
      <input id="search-input" type="search" placeholder="Or search for an item..." />
    </form>
    <h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
    <h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
    <h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
    <h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
    <h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
    <h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
  </div>

  <div class="inner-menu-grid">
    <h2 id="appetizers" class="food-section">Appetizers</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <h2 id="pizza" class="food-section">Pizza</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="salads" class="food-section">Salads</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="pasta" class="food-section">Pasta</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Pasta item</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="sandwiches" class="food-section">Sandwiches</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

  </div>
  <!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->

Посмотреть на JSFiddle

Answer 1

Создайте сетку из двух строк, поместите панель навигации в верхний ряд и поместите содержимое во второй ряд, а также убедитесь, что первый ряд начинается сверху и заканчивается на 150 пикселей сверху.

Answer 2

Я бы предположил, что если вы не хотите, чтобы содержимое заголовка перекрывалось, position: fixed может оказаться не лучшим решением. Другой подход заключается в размещении страницы таким образом, чтобы заголовок имел фиксированную высоту, а затем содержимое, расположенное ниже, занимает остальную часть высоты страницы с overflow, установленным на auto, так что он будет прокручиваться, но заголовок выиграет. т.

Быстрый пример:

<main>
  <header>...</header>
  <div class="content">...</div>
</main>

body, html {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  height: 200px;
  flex: 0 0 auto;
}

.content {
  flex: 1;
  overflow: auto;
}

Answer 3

Вам может пригодиться position:sticky.
Кажется, вы уже используете его для раздела "Оглавление".

Элемент с липким позиционированием - это элемент, чье вычисленное значение позициилипкийОн обрабатывается как относительно позиционированный, пока его содержащий блок не пересекает заданный порог (например, задает для top значение, отличное от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), после чего он обрабатывается как «застрявший» до достиженияпротивоположный край содержащего его блока.- позиция .

Также обратите внимание совместимость браузера для position:sticky.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  height: 150px;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100vw;
  position: sticky;
  top: 0;
  z-index: 1;
}


/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {
  .header,
  .main-nav {
    display: flex;
  }
  .header {
    flex-direction: column;
    align-items: center;
    .header {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

.parallex {
  background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
  background-attachment: fixed;
  height: 100vh;
}

.text-in-parallex {
  position: relative;
  top: 70vh;
  left: 28vw;
  color: white;
  font-size: 45px;
}

body {
  background-color: #EEEEEE;
  /* #EE2324 */
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 80%;
  margin: 20px auto 100px auto;
  padding-bottom: 100px;
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 3px;
  /* Shadow */
  -moz-box-shadow: 0px 3px 30px 1px #ccc;
  -webkit-box-shadow: 0px 3px 30px 1px #ccc;
  box-shadow: 10px 15px 30px 15px #ccc;
  font-family: 'Alice', serif;
}

.table-of-contents {
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.table-of-contents>h2 {
  text-align: center;
  margin-bottom: 10px;
}

.inner-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: white;
  padding: 20px 20px 25px 20px;
  border-radius: 3px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: 20px;
}

.menu-section {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 20.9368px;
  font-weight: 400;
  margin-bottom: 10px;
}

.menu-section>a {
  text-decoration: none;
  color: #999999;
  padding-left: 7px;
}

.menu-section>a:hover {
  border-left: 1px solid blue;
  color: #1f5ea9;
  text-decoration: underline;
}

.name-of-food {
  font-size: 20px;
}

.food-description {
  color: grey;
  font-style: italic;
}

.food-section {
  grid-column: 1 / 3;
  text-align: center;
  padding-top: 20px;
  font-size: 2em;
}

.food-section:nth-child(1) {
  padding-top: 0;
}

.restaurant-info {
  grid-column: 1 / 3;
  text-align: center;
  border: 1px solid lightgray;
  padding: 20px 0px;
}

#search-form {
  border-radius: 3px;
  text-align: center;
  margin-bottom: 10px;
}

#search-input {
  width: 80%;
}

.fab {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 3px;
}

.fab:hover {
  opacity: 0.7;
  cursor: pointer;
}

.fa-facebook-square {
  background: #3B5998;
  color: white;
}

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div class="menu-grid">
  <div class="restaurant-info">
    <h1>Example Pizzeria</h1>

  </div>
  <div class="table-of-contents">
    <h2>Menu</h2>
    <form id="search-form">
      <input id="search-input" type="search" placeholder="Or search for an item..." />
    </form>
    <h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
    <h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
    <h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
    <h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
    <h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
    <h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
  </div>

  <div class="inner-menu-grid">
    <h2 id="appetizers" class="food-section">Appetizers</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <h2 id="pizza" class="food-section">Pizza</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="salads" class="food-section">Salads</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="pasta" class="food-section">Pasta</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Pasta item</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="sandwiches" class="food-section">Sandwiches</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

  </div>
  <!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->