Есть ли способ, чтобы верхняя панель с изображением заголовка склеивалась в верхней части страницы? - PullRequest
Новая
       16

Есть ли способ, чтобы верхняя панель с изображением заголовка склеивалась в верхней части страницы?

1 голос
/ 26 апреля 2019

Я создаю веб-сайт для компании, занимающейся производством фильмов, с помощью Foundation 6. Я создал панель навигации в верхней панели с его логотипом над верхней панелью и сделал их липкими. Кажется, что он отлично работает на больших экранах и маленьких экранах, но если смотреть на что-либо между логотипом, он отделяется от верхней панели. Это наиболее очевидно, когда вы растягиваете и сжимаете страницу.

Я пытался включить изображение в div верхней панели, но оно выравнивает его по левому краю, и я не смог выровнять его по верху, как это делается в настоящее время. Это первый раз, когда я работал с липкой функцией в Foundation. Я просмотрел документы Foundation, Google и StackOverflow, но ничего подобного не нашел.

Это мой топ-бар. 

<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

    <div class="grid-y">
              <img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar"  data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!--    <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
  <div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
    <ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
      <li><a href="index.html">Home</a></li>
      <li><a href="news.html">Current News</a></li>
      <li><a href="film.html">Film/Media</a></li>
      <li><a href="photography.html">Photography</a></li>
      <li><a href="publicity.html">Publicity</a></li>
      <li><a href="miscellaneous.html">Misc</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
  </div>
</div> 
</div>

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

...