Каков наилучший способ в Bootstrap4 отображать меню и меню гамбургеров вместе (на панели навигации)? Идея — менее важные элементы меню через гамбургер-меню. Спасибо за любую помощь! Джерард
Проверьте этот пример и попробуйте адаптировать его к вашему случаю:
Codepen.io/Plagu33/pen/yoNOJw
Где твой пример?
Отредактировано.. проверьте сейчас
Спасибо за вашу помощь! Я имел в виду часть расширенного меню и часть (менее часто используемые варианты) в виде гамбургера. Это возможно?
Пример меню гамбургера Вы можете посмотреть на getbootstrap.com:
<
nav class = "navbar navbar-inverse navbar-static-top" role = "navigation">
<div class = "container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li><a href = "index.php">Home</a></li>
<li><a href = "about.php">About</a></li>
<li><a href = "#portfolio">Portfolio</a></li>
<li><a href = "#">Blog</a></li>
<li><a href = "contact.php">Contact</a></li>
</ul>
</div>
</div>
</nav>
Если вы зайдете на официальный сайт bootstrap. https://getbootstrap.com/docs/4.0/components/navbar/ , примеров навбара очень много.
Основная идея - точка останова экрана. Чтобы решить, на какой точке останова показывать значок hamburger.
В bootstrap-4 это контролируется служебным классом navbar-expand-X. Так что, если мы хотим показать наш значок гамбургера, когда размер экрана средний и ниже, мы будем использовать navbar-expand-md на родительском элементе nav.
<nav class = "navbar navbar-expand-md navbar-light bg-light">...</nav>
Bootstrap предоставит свои собственные стили для панели навигации, которые мы затем можем переопределить нашими собственными стилями в зависимости от наших требований.
Спасибо, что приняли мой ответ :) Надеюсь, это помогло. Также найдите секунду, чтобы проголосовать за.. Чтобы другие разработчики могли извлечь выгоду :) Happy Coding Mate