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).
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
, and27
. - Adjust theme-color in line
28
, this should be your primary-color. - Open site.webmanifest and remove
/
fromsrc
in lines6
and11
for Android touch icons. - Test with Favicon checker.
Logo
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 lines49
and50
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 togglerd-*-none
sets breakpointsnavbar-expand
and togglerd-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.