Как настроить navbar на мобильный?Высота мешает образу героя - PullRequest
Новая
       9

Как настроить navbar на мобильный?Высота мешает образу героя

0 голосов
/ 21 ноября 2018

www.firstcalluplinks.com

введите описание изображения здесь

Навигационная панель и изображение героя имеют проблемы с изменением размера на мобильном телефоне.Изображение героя и наложение текста отсекаются с помощью навигационной панели.Высота панели навигации вызывает проблему - Невозможно изменить размер логотипа так, как я хочу, в соответствии с размером экрана.Я использовал шаблон AMP и настроил его.

CSS: 

 .cid-r3y3K9GszO amp-sidebar.open:after{content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(217, 217, 217, 10);}
 .cid-r3y3K9GszO .open{transform: translateX(0%);display: block;}
 .cid-r3y3K9GszO .builder-sidebar{background-color: #d9d9d9;position: relative;min-height: 100vh;z-index: 1030;padding: 1rem 2rem;max-width: 20rem;}
 .cid-r3y3K9GszO .headerbar{display: flex;flex-direction: column;justify-content: center;padding: .5rem 1rem;min-height: 70px;align-items: center;background: rgba(217, 217, 217, 0.8);}
 .cid-r3y3K9GszO .headerbar.sticky-nav{position: fixed;z-index: 1000;width: 100%;}
 .cid-r3y3K9GszO button.sticky-but{position: fixed;}
 .cid-r3y3K9GszO .brand{display: flex;align-items: center;align-self: flex-start;padding-right: 30px;}
 .cid-r3y3K9GszO .brand p{margin: 0;padding: 0;}
 .cid-r3y3K9GszO .brand-name{color: #ffffff;}
 .cid-r3y3K9GszO .sidebar{padding: 1rem 0;margin: 0;}
 .cid-r3y3K9GszO .sidebar > li{list-style: none;display: flex;flex-direction: column;}
 .cid-r3y3K9GszO .sidebar a{display: block;text-decoration: none;margin-bottom: 10px;}
 .cid-r3y3K9GszO .close-sidebar{width: 30px;height: 30px;position: relative;cursor: pointer;background-color: transparent;border: none;}
 .cid-r3y3K9GszO .close-sidebar:focus{outline: 2px auto #1b4376;}
 .cid-r3y3K9GszO .close-sidebar span{position: absolute;left: 0;width: 30px;height: 2px;border-right: 5px;top: 50%;background-color: #1b4376;}
 .cid-r3y3K9GszO .close-sidebar span:nth-child(1){transform: rotate(45deg);}
 .cid-r3y3K9GszO .close-sidebar span:nth-child(2){transform: rotate(-45deg);}@media (min-width: 992px){.cid-r3y3K9GszO .brand-name{min-width: 8rem;}
 .cid-r3y3K9GszO .builder-sidebar{margin-left: auto;}
 .cid-r3y3K9GszO .builder-sidebar .sidebar li{flex-direction: row;flex-wrap: wrap;}
 .cid-r3y3K9GszO .builder-sidebar .sidebar li a{padding: .5rem;margin: 0;}
 .cid-r3y3K9GszO .builder-overlay{display: none;}}
 .cid-r3y3K9GszO .hamburger
    {position: absolute;top: 25px;right: 20px;margin-left: auto;width: 5%;height: 5%;background: none;border: none;cursor: pointer;z-index: 1000;}@media (min-width: 768px)
    {.cid-r3y3K9GszO .hamburger{top: calc(0.5rem + 55 * 0.5px - 10px);}}
 .cid-r3y3K9GszO .hamburger:focus{outline: none;}
 .cid-r3y3K9GszO .hamburger span{position: absolute;right: 0;width: 65px;height: 4px;border-right: 5px;background-color: #1b4376;}
 .cid-r3y3K9GszO .hamburger span:nth-child(1){top: 0;transition: all .2s;}
 .cid-r3y3K9GszO .hamburger span:nth-child(2){top: 13px;transition: all .15s;}
 .cid-r3y3K9GszO .hamburger span:nth-child(3){top: 13px;transition: all .15s;}
 .cid-r3y3K9GszO .hamburger span:nth-child(4){top: 26px;transition: all .2s;}
 .cid-r3y3K9GszO amp-img{height: 115px;width: 215px;margin-right: 1rem;margin-left: 2rem;}@media (max-width: 215px;)
 .cid-r3y3K9GszO amp-img{max-height: 115px;max-width: 215px;}}
 .cid-r3y3K9GszO amp-img img{height: 100%;object-fit: relative;object-position: center;}
...