Сделать логотип в меню, как на пикабу.

InstantCMS 2.X
#1 6 декабря 2018 в 03:37
Всем привет)))
Вот задался таким вопросом.
Есть ли у кого подобный вывод логотипа?

  1. #logo { position: fixed;
  2. height: 60px;
  3. overflow: hidden;
  4. width: 166px;
  5. z-index: 990;
  6. }
Так то вроде получается, но если зайдем с мобильного телефона, то логотип налазиет на меню, когда скролим, потому как меню тоже фиксируется.
#2 6 декабря 2018 в 10:09
Мне там кошара на логотипе понравилась (не знаю есть ли сейчас). При наведении она пряталась laughЕсли кто скинет это решение буду рад
#3 6 декабря 2018 в 12:25
У меня был, делал на основе boxed, завтра могу найти исходники. Демо могу в лычку скинуть (там принципе тоже не сложно выдрать)

P. S. Надо сделать шаблон пикабу для инстанта)
#4 6 декабря 2018 в 13:02
Jestik, буду признателен за ссылочку)))
Так у вас все хорошо отображается на смартфоне?
Мне вот немного не понятно, как правильно в @media screen добавить логотип?
То есть определить совсем другую картинку?
Если основное фото, допустим 60 на 200 пикселей, то на смартфонах показывать, ну допустим 60 на 60?
#5 7 декабря 2018 в 07:32

Мне вот немного не понятно, как правильно в @media screen добавить логотип?

skewes
Двумя способами или через бэкграунд или прятать элемент

  1.  
  2. <style>
  3. /* hide mobile version by default */
  4. .logo .mobile {
  5. display: none;
  6. }
  7. /* when screen is less than 600px wide
  8.   show mobile version and hide desktop */
  9. @media (max-width: 600px) {
  10. .logo .mobile {
  11. display: block;
  12. }
  13. .logo .desktop {
  14. display: none;
  15. }
  16. }
  17. </style>
  18.  
  19. <div class="logo">
  20. <img src="/images/logo_desktop.png" class="desktop" />
  21. <img src="/images/logo_mobile.png" class="mobile />
  22. </div>
  23.  

P. S. Надо сделать шаблон пикабу для инстанта)

Jestik

А что там сложно такого что не реализовать на инстанте?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.