
Originally Posted by
Dave224
At a screen width around 992px, the bootstrap template home icon in the header on a large device changes to a hamburger. I'd like to change the screen width when that transition occurs. Changing 992px in includes/template/bootstrap/css/stylesheet.css does not change it. Where can I control that transition point?
Thank you!
Dave
zc1.5.8a, Bootstrap 3.7.7
You'll need to change your bootstrap clone's /common/tpl_header.php (line 24 of v3.7.7):
Code:
<div id="navMain">
<nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom" aria-label="<?= TEXT_HEADER_ARIA_LABEL_NAVBAR ?>">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
... changing that highlighted class to reflect the breakpoint at which you want the change. I googled bootstrap change hamburger screen width and that AI Overview came back with some good answers.
See also the Bootstrap documentation: https://getbootstrap.com/docs/4.1/components/navbar/