Change the width of the logo and menu in the Beaver Builder Theme for WordPress

In this tutorial I am going to show you how to change the width of the logo and menu in the Beaver Builder Theme to make use of that wasted space and stop your navigation going over two lines.

The annoying space inbetween your Logo and menu I’m sure you’ve tried to fill at least once in your Beaver Builder journey

In most of the websites I’ve built with the Beaver Builder Page Builder for WordPress I place the logo on the left side of the header and then the menu is to the right. In the Beaver Builder Theme this layout is referred to as the Nav Right layout.

This is set by logging into your WordPress Dashboard and navigating to Appearance > Customize > Header > Header Layout as shown below.


But in the Beaver Builder Theme the header is divided into two columns when you choose this layout – column 1 for the logo on the left and column two on the right with the menu in it.

The logo column and menu column with the Nav Right header layout in the Beaver Builder are defined widths.

They have to be so they can be coded to work. But this can also be limiting.

Sometimes you might have a smaller logo and have quite a few menu items.

If you do, you’ll have something similar to below where there is the logo, large space and then the menu which sits over two lines.

Change the width of the logo and menu in the Beaver Builder Theme
Change the width of the logo and menu in the Beaver Builder Theme so you don’t have this problem!

But there’s room for the menu to sit in the vacant space to the left of it!

In this tutorial I am going to show you an easy way to customize the widths of the Logo and Navigation areas so you can alter them to your needs.

Let’s jump in!

Step 1: Copy the nav-right.php file from the Parent Beaver Builder Theme into your Beaver Builder Child Theme

Using your FTP Client or cPanel, go to your active Child Theme (the Theme you are currently using for your website) and create a folder named includes inside this Beaver Builder Child Theme.

For example, if you are using our Electro CHARGE child theme you would go to /wp-content/themes/electrocharge and create a new folder called includes here.

[product_category category=”child-themes”]

Now, using your FTP Client or cPanel, navigate to the includes folder inside the parent Beaver Builder Theme by going to /wp-content/themes/bb-theme/includes and copy the file named nav-right.php from here into the new folder named includes that you created in your active Beaver Builder Child Theme.

So, if you’re using the Electro CHARGE child theme you would go to /wp-content/themes/bb-theme/includes and copy the nav-right.php file from here to /wp-content/themes/electrocharge/includes.

Step 2: Change the width of the logo and menu in the Beaver Builder Theme for WordPress

Edit the nav-right.php file you just copied into your active Child Theme.

Look for the below lines in the file.

The first div above has the CSS class fl-page-header-logo-col so that should give you some clues as to what this is – the column for the logo!

The last line in the code above is the start of the navigation column – as you can tell by its CSS Class name fl-page-nav-col.

As discussed in our previous posts Customize the Post Header of a Single Post in the Beaver Builder Theme and How to integrate Gravity Forms with the Beaver Builder Theme the Beaver Builder Theme is built on the Twitter Bootstrap CSS Framework and we can leverage this for this customization.

In the above PHP code we can see the Bootstrap CSS grid is being used because we see CSS classes such as col-md-4 and col-md-8.

You can read all about the Twitter Bootstrap Framework here so we won’t go in-depth into how it works in this post.

What you do need to know is that it is a 12 column grid. This means that the columns in a row need to add up to 12.

If we review the above PHP code, we can see that the div for the logo with the CSS class fl-page-header-logo-col also has the CSS class col-md-4 which means it is taking up 4 columns out of 12.

We can also note that next to it, the div that contains the navigation with the CSS class fl-page-nav-col has the CSS class col-md-8 meaning it takes up the remaining 8 columns in the 12 column grid.

To make the menu fill the space to the left of it, we need to do two things:

  1. Decrease the width of the logo div
  2. Increase the width of the navigation div

Working with Twitter Bootstrap CSS classes makes this extremely easy. 

Replace the PHP code above with the below PHP code.


  1. We have changed the CSS class on the logo from col-md-4 to col-md-2 which means it is only taking up 2 columns now and not 4 like it originally was.
  2. We have changed the CSS class on the navigation from col-md-8 to col-md-10 so now it takes up an extra 2 columns than before.

Save the nav-right.php file with this change and view the front end of your website.

No more wasted space!

The menu now extends further to the left and you’re onto bigger and better things.


Never will you have to start at that unused space ever again.

Comment and share!

We’re on a mission to help create Masters of WordPress and Beaver Builder and you sharing our page goes a long way.

If you have any questions please comment below and I’ll be more than happy to lend a hand 🙂

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

2 thoughts on “Change the width of the logo and menu in the Beaver Builder Theme for WordPress”

  1. Thank you for this! I have ended up using this article on two client projects. Along these lines, any ideas on how to change the logo size on mobile? I am using BB theme and can change the logo size using this CSS:
    .fl-logo-img {max-width: 500px;}
    But I need a way to have the logo be smaller on mobile. Thanks Grant!

    1. Yep! just wrap it in a media query. @media only screen and (max-width: 600px){.fl-logo-img {max-width: 300px;}}

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top