At Appearance → Menus create (if needed) and edit your main/header menu.
Click "View All" in the Pages accordion on the left and click "Home - Front Page".
Drag the Home menu item in the center with other menu items around it.
Let's add support for theme logo so that logo can be set in the Customizer.
// Add theme support for custom logo add_theme_support( 'custom-logo' );
Go to Appearance → Customize → Site Identity and select/upload your logo image.
If you'd like to follow along, you could upload this image.
Edit your Header template with Bricks.
Add a Section and inside its Container, a Nav Menu element.
If there is more than 1 menu in your site, select your main/header menu.
By default nav menu list items have a left margin value of 15px.
A better way to space out the items is to set left and right padding for the anchor elements (the actual links) inside the
Under the TOP LEVEL MENU control group set left Margin to 0 and set left and right Padding to 15.
If you'd like the header to be a sticky, click the Settings (gear) icon → TEMPLATE SETTINGS → HEADER.
Enable (the controls are technically checkboxes, so "tick" would be the correct verb) Sticky header and Sticky on scroll.
In my test site, I set Scrolling background to #ffffff.
Scrolling box shadow: 0, 4, 16, 8 with a Color of RGBA 33, 33, 33 and 0.1.
Now for the fun part.
Let's loop through the nav menu objects and for each, check if the menu title text matches
Home and if so, replace it with the HTML of the custom logo image.
Add this in your child theme's
functions.php or the code snippets plugin:
This is a Pro members-only tutorial.
To get full access, login below or sign up for a Pro Account