Заголовок навбар слишком громоздкий - PullRequest
Новая
       6

Заголовок навбар слишком громоздкий

0 голосов
/ 31 мая 2018

Я работаю над этим сайтом - http://galleriadesigns.co.uk/dev/

У меня проблема в том, что Nav-Bar слишком громоздкий.Любые идеи о том, как я могу сделать его меньше, сохранив тот же макет.

Я попытался изменить (свойства top и z-index), это просто подтолкнуло все и не выглядело хорошо.

Я хочу, чтобы это было похоже на это - https://www.cxwebexperts.com/themes/adam/

Это мой CSS - 

.intelligent-header {
transition: .3s;
position: fixed;
width: 100%;
z-index: 999;
transform: translateY(0%);
top: 0;
border-bottom: 1px solid #e5e5e5;

} 

body.logged-in.admin-bar .intelligent-header { top: 32px; –}

Спасибо.

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Для вашего .logo класса у вас есть следующие отступы: padding: 25px 0px;

: 

.logo {
    padding: 8px 0;
    transition: .3s;
}

УМЕНЬШИТЕ padding (для верха и низа, т.е. 25pxдо 10px;)

0 голосов
/ 31 мая 2018

По ссылке на ваш сайт я обнаружил некоторые проблемы с CSS.здесь я посылаю CSS для этого

.logo {padding: 15px 0;} .logo .navbar-brand > img {width: 55px; margin: 0;} .header-middle-area #menu-primary-menu.main-menu.hover-style-one.clearfix {margin: 0;}

0 голосов
/ 31 мая 2018

Если вы удивляетесь, почему ваш вопрос подвергается отрицательному голосованию, взгляните на следующие рекомендации: Как создать минимальный, полный и проверяемый пример

Как вы хотите добиться аналогичногоВ отличие от демонстрационной темы Адама, вы, возможно, не захотите обрезать свой логотип, из-за чего меню будет намного больше, чем на сайте демо, просто сравните их размер:

  • Ваше изображение 60высота в пикселях
  • высота логотипа Адама составляет 30 пикселей

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

Если вы хотите пойти дальше и изменить css темы, вы можете удалить padding для класса .logo или установить его равным 0, но это может вызвать другой дизайн громоздкость .

...