Centered Image Logo in Bricks

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get full access to all 220+ Bricks tutorials with BricksLabs Pro


  • Smith Benites

    Hi, I seem to have a problem getting it to work on brick version 1.6.2.

    Place everything as it should, but it doesn’t seem to work, now when I call the menu with code ” 5 ) );

    It seems to work fine there, do you know what could be the reason?

  • Brian Lovelace

    Excellent work as always, Sridhar! Set this up on my site today and it worked perfectly.

Leave your comment