Documentation Theme

header.php

This file contains the logo, favicons, theme colors, main-menu and two widget positions. Edit file by storing a copy in your child (bootCommerce has already).

Contents
header.php at a glance
Favicon, touch-icons and theme colors
Logo
Offcanvas
Breakpoints
Colors

header.php at a glance

<head>
  <!-- Favicons, touch icons, Safari pinned tab icon and theme colors -->
</head>

<body>

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

    <!-- change breakpoints and nav color here. add navbar-dark class to turn nav-links into white -->
    <nav class="navbar-expand-lg">

      <div class="container">

        <a class="navbar-brand">
          <!-- Logo(s) -->
        </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>

Favicon, touch-icons and theme colors

We highly recommend taking this step seriously and replace ALL icons and colors before going live to show site correct in all browsers and search results.

Files are linked in the <head> to folder /img/favicon/ in the child-themes.

  • Generate your icons with realfavicongenerator.net, download the package, unzip and replace icons in the folder.
  • Adjust colors for Safari pinned tab icon and Windows phones in lines 26, and 27.
  • Adjust theme-color in line 28, this should be your primary-color.
  • Open site.webmanifest and remove / from src in lines 6 and 11 for Android touch icons.
  • Test with Favicon checker.

The logo(s) are .svg vector images and located in folder /img/logo/ in the child-themes. logo-sm.svg is shown on phones and logo.svg is for larger devices.

  • Edit or create a logo by using Inkscape, Adobe Illustrator, Corel Draw or any other vector graphic application.
  • Replace these two files with your own logo .svg images.
  • If you want to use another image format such as .jpg or .png, store your images in same folder and adjust the path in lines 49 and 50 to your new logo. For example /img/logo/logo-sm.png and /img/logo/logo.png.

Offcanvas

Theme uses Offcanvas for collapsed menu, user and cart. Change placement for open offcanvas by using offcanvas-top, offcanvas-end, offcanvas-bottom or offcanvas-start classes.

Breakpoints

Navbar uses navbar-expand-lg to show mobile menu ≤991px and expands on ≥992px screen width. Theme doesn’t use the default Bootstrap navbar-toogler. It uses just a button with a Font Awesome icon and hides above the breakpoint by using d-lg-none class instead.

Use any navbar-expand-* class and change d-*-none in toggler. For example navbar-expand-md and toggler d-md-none will expand navbar on iPad portrait view.

  • navbar-expand-* and toggler d-*-none sets breakpoints
  • navbar-expand and toggler d-none set navbar always to expand
  • removing both classes shows the mobile menu on all screen sizes.

Colors

Navbar uses bg-light classes for light gray background-color. Change them to navbar-dark bg-primary and navbar is blue with white links.

Buttons uses btn-outline-secondary for styles and colors. Change classes to btn-light and buttons are light too.

To top