Preparing Bootstrap 5.1.0

This update 5.0.2.3 prepares for the upcoming Bootstrap 5.1.0, which will be shipped with a nice surprise and that’s why both header.php’s have received an update.

Update

From 5.0.2.0 or newer, you can use your header.php. But if you just started a new project or need something to do, I recommend to swap straight to new one.

If you use 5.0.2.0 or newer, you can update theme via the theme uploader. If you do not use the search widget in navbar, do nothing. If you use that widget, open header.php and search for top-nav-search-md and top-nav-search-lg classes. Remove them.

header-*.php

header.php and header-woocommerce.php (bootcommerce-child) got an update by simplyfing the markup and using straight Bootstrap classes instead of custom CSS. 

Buttons like search or cart are grouped in a <div class=“header-actions“> and you can easily remove them or add new without checking order-lg-* or flex-grow classes anymore. Logo is in both files on mobile screen always on the left, buttons on the right.

This is much more easy to understand, invites to play around and creating something cool of it. Use <a> instead of <button>, add a top-bar with social icons above the nav. Move cart or add additional information to there, everything is now possible in a simple and clear way.

Search

The search dropdown (header.php on mobile screens, header-woocommerce.php on all screen sizes) is replaced by collapse component. This removes custom CSS and prevents bugs like I’ve seen on many bootScore sites. The search button in the navbar is now hidden when you use a different widget position for the search.

The searchform has an autofocus now. Just click search button in navbar and start typing directly. This still not work on some mobile devices, but there will be a solution for this in further updates.

Cart

Cart count uses now Bootstrap position utilities to show badge on top-right position like example below.

Add something to the cart in the shop to see the difference. This is a pluggable function in woocommerce-functions.php and can easily be overwritten in the child theme.

Navbar-toggler

Class navbar-toggler is removed and uses d-lg-none instead. There is no struggle with toggler styles, font-size and icon anymore. Simply select a button style and icon of your choice.

Responsive breakpoints

Use navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to set the the collapsing breakpoints to navbar. Use d{-sm|-md|-lg|-xl|-xxl}-none to hide toggler above them. Widgets are in every setting always in correct position now.

A brief overview of the markup

<!-- change bg color and position here -->
<div class="fixed-top bg-light">

    <!-- change breakpoints and nav color here -->
    <nav class="navbar-expand-lg navbar-light">

        <div class="container">

            <a class="navbar-brand">
                <!-- Logo -->
            </a>

            <!-- offcanvas menu, change direction here -->
            <div class="offcanvas offcanvas-end">
                <!-- nav-walker -->
            </div>
            
            <!-- group for all buttons -->
            <div class="header-actions">
                <!-- top-nav-widget-->
                <!-- search-toggler or search-form -->
                <!-- user-toggler (header-woocommerce.php) -->
                <!-- mini-cart-toggler (header-woocommerce.php) -->
                <!-- navbar-offcanvas-toggler d-lg-none -->
            </div>

        </div>

    </nav>

    <div class="collapse container">
        <!-- collapsed searchform -->
    </div>

    <div class="offcanvas offcanvas-start">
        <!-- offcanvas user (header-woocommerce.php) -->
    </div>

    <div class="offcanvas offcanvas-end">
        <!-- offcanvas cart (header-woocommerce.php) -->
    </div>

</div>

What else?

• New language: Čeština, thnx to Petr Žaloudek
• Many minor bugfixes and improvements

See you in Bootstrap 5.1.0!