Updated on 8 Mar 2023
This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the header becomes sticky in Bricks.
Step 1
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.
Step 2
Let's add support for theme logo so that logo can be set in the Customizer.
Add this in child theme's functions.php or a code snippets plugin:
// 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.
Click Publish.
Step 3
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 li elements.
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.
Step 4
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:
