Странное позиционирование верхней панели Zurb Foundation 5

Привет, ребята, так что сайт, над которым я работаю, разворачивается и случайно расположил себя на верхней панели, и я понятия не имею, почему. Раньше я думал, что все в порядке, однако недавно я увидел сайт, и так получилось, что в верхней части страницы между панелью навигации и URL-адресом окна появилось странное пространство. Может ли кто-нибудь проверить это и помочь мне выяснить, что вызвало это, и будет ли быстрое или простое решение. Сайт http://www.omegadesignla.com/ и любая помощь будет оценена, спасибо.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Omega Design | LA</title>
    <meta name="description" content="Web development and printing services serving the greater los angeles area">
      <meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
    <link rel="stylesheet" href="stylesheets/app.css" />
    <link rel="stylesheet" href="stylesheets/foundation-icons.css" />
    <link rel="stylesheet" href="css/normalize.css" />
  </head>
  <body>
    <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">
              <span><a href="index.html"><img class="logo" src="img/logofinal.png"></a><span>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#about">About us</a></li>
              <li><a href="#" data-reveal-id="myModal">Contact us</a></li>
                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="services.html#printing">Print Media</a></li>
                    <li><a href="services.html">Web Development</a></li>
                   <!--  <li><a href="services.html">Promotional Items</a></li> -->
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
  <div class="container">
    <header>

2 ответа

Решение

Там есть линия "&nbsp;&nbsp; " сразу после body тег. Удалите его, и это должно правильно переместить навигационную панель.

Я только что понял, что вы можете увидеть это, только если "осмотрите элемент" в инструментах разработки.

Если вы можете редактировать источник страницы, убедитесь, что <nav class="top-bar" data-topbar> приходит сразу после <body>, Прямо сейчас есть пустая строка (строка 16).

Решите эту проблему попробуйте это

body{
   font-size: 0;
}
Другие вопросы по тегам