Я работаю над шаблоном 11ty+bootstrap и пытаюсь внести некоторые изменения. Я клонировал шаблон с Github ссылка и в настоящее время работает на локальном хосте.
Панель навигации имеет обычный текстовый логотип с фоновым цветом, а также некоторыми полями и отступами.
Ссылка github на оригинальный компонент навигационной панели находится здесь
Я пытаюсь получить панель навигации (см. Изображение ниже) с перекрывающимся логотипом img и панелью переключения с элементами, выровненными по центру, и расширяется, толкая содержимое тела.
Я попробовал следующие изменения кода и получил это
.navbar {
height: 50px;
}
.nvabar-brand {
position: relative;
z-index: 1;
}<nav class = "navbar navbar-expand-lg fixed-top border-bottom navbar-light pt-0" style = "background-color: #ffffff;">
<div class = "container">
<a class = "navbar-brand" href = "{{ '/' | url }}"><img src = "/img/Logo Placeholder.svg" alt = "" width = "50" height = "100">
</a>
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav ms-auto mt-5 mb-2 mb-lg-0 text-center">
<li class = "nav-item me-1">
<a class = "nav-link" aria-current = "page" href = "{{ '/' | url }}">Home</a>
</li>
<li class = "nav-item me-1">
<a class = "nav-link" href = "{{ '/default' | url }}">Sample Page</a>
</li>
<li class = "nav-item me-1">
<a class = "nav-link" href = "{{ '/blog' | url }}">Sample Blog</a>
</li>
</ul>
</div>
</div>
</nav>После получения поддержки от пользователя Reddit следующее исправление сработало для меня, и я надеюсь, что оно поможет!
Мне пришлось избавиться от высоты, положения и z-индекса навигационной панели в navbar-brand и вместо этого добавить отдельный класс для логотипа с отрицательным нижним полем.
В файл CSS темы добавлен следующий код.
.logo {
margin-bottom: -48px !important;
}
.navbar-brand {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
И, наконец, внесены некоторые незначительные корректировки полей и отступов внутри встроенного класса компонента нунджака, чтобы исправить высоту панели навигации и выравнивание ссылок в меню.