Navbar allways collapsed and show the hamburger instead

Plone Support Theming
1

Using Plone 6 Classic UI: Can the navbar allways (i.e. for all screen resolutions) remain collapsed and show the hamburger instead?

2

Not sure if there is an "easy" way (bootstrap theming forums are probably a good place to ask). The hard way: you'll have to find out where the breakpoints are defined, and override the elements that are applied for whichever media/resolution you want to change.

You could start by looking in ./my_theme/node_modules/bootstrap/scss/_variables.scss and find out that:

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints

Then, look for the dimensions where the menu is not being displayed how you want it and overrride the affected elements...

Perhaps try to explain to the client that the usability and ux-choices made by the bootstrap team are based on the choices made by a large expert community. What they (the client) think they want is not what they need!

3

"For navbars that always collapse, don’t add any .navbar-expand class"

You can try on Welcome to Plone — English, removing the navbar-expand-lg classes using the webmaster tools. You've to add some css to fix the button position on screens > lg.

4

Thanks. navbar-expand-* is it.

Removing this class in theme\index.html in the following two places:

The second one will always collapse the navbar. The first one will always show the hamburger.

As @yurj points out the hamburger must be repositioned for higher screen resolutions.

    <header id="content-header" class="container d-flex pt-3 flex-column justify-content-between align-items-lg-start flex-lg-row">
      <div id="portal-top" class="mb-3 d-flex justify-content-end">
      </div>
      <div id="portal-logo-wrapper" class="pb-3 d-flex justify-content-between align-items-center order-lg-first w-auto">
        <div id="portal-logo" class="order-lg-0"></div>
-->     <div class="navbar navbar-expand-lg">
          <button class="navbar-toggler border-secondary" type="button"
            data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon "></span>
          </button>
        </div>
      </div>
    </header>
    <div id="mainnavigation-wrapper">
      <div id="mainnavigation">
-->     <nav class="navbar navbar-expand-lg navbar-barceloneta pat-navigationmarker" id="portal-globalnav-wrapper">
          <div class="container">
            <div class="offcanvas offcanvas-end " tabindex="-1" id="offcanvasNavbar"
              aria-labelledby="offcanvasNavbarLabel">
              <div class="offcanvas-header justify-content-end">
                <button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"
                  aria-label="Close"></button>
              </div>
              <div class="offcanvas-body align-items-center">
                <ul class="navbar-nav me-auto" id="portal-globalnav">
                </ul>
                <div id="portal-searchbox">
                  <!-- searchbutton class is set in rules.xml -->
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
1 Like