ProBeaver Weekly
Weekly for all things Beaver

Increase Menu area width in Beaver Builder Theme header

So, the latest update of Beaver Builder Theme made your menu in the header area drop to two lines? Do you want to add more menu items and still make all menu items appear in a single line?

Before and After

Change beaver menu area width in the header

Change Menu are width in Beaver Builder Theme

Fortunately, this can be easily changed using little bit of CSS code. Just add the following code in style.css file of your child theme or in the global CSS box in the global settings of the Beaver Builder plugin.

What does this code do

For screen display of 992px and above, the size of view-able area where menu it displayed is increased to 800px. You can change this value to adjust menu items as per requirement.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

3 Comments

  1. James on April 19, 2018 at 2:38 pm

    Another way: using BB Theme. When creating the page, choose NO HEADER NO FOOTER and put a row (one cell row) at top of page for the menu. (Or wherever else you want it too.)

    You can make that row full width if you want. Is that missing the automatic header/footer offered up by theme in WP and BB (in normal usage)???

    Not really. Just make your menu design as you wish and save that module with a name. Hence you enter the “menu module” as a choice on all pages needing it. It is far easier and far more flexible to design the menu on its own in BB and repeat it than to get the theme to do it. And, you can have several (many) menu module names for special situations as well (background images may need special colors for the menu to enhance being seen on a per-page basis.

    See: https://skyborough.com/ for example. All pages on this site are NO HEADER NO FOOTER and each has its own specs for the menu and they are as you choose to make them.

    And the footer is far easier to design any way you want than trying to get the theme to do it. They also can be save with/without the global choice and inserted per page easily and quickly.

  2. Peter on April 23, 2018 at 1:20 pm

    Perfect! and if I want it to be the same on all pages. This only fixes the index page.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a Beaver Builder Expert

Pre-order "Mastering Beaver Builder" course