facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

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.

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

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

beaver-builder-theme-nav-right-layout

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.

  • thumb-bewell

    BeWell

    $69.00
    Live PreviewAdd to cart
  • thumb-electrician

    Electro CHARGE

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart
  • thumb-fitness-direct-template

    FitnessDirect

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart

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.

THINGS TO NOTE WITH THE ABOVE 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.

beaver-builder-theme-extend-menu-left-complete

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 🙂

2 Comments

  1. doublemint2x on May 17, 2017 at 1:27 pm

    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!

    • Grant Ambrose on May 23, 2017 at 4:11 pm

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

Leave a Comment

You must be logged in to post a comment.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x