Beaver builder and the navbar

Hi I wanted to know how I can use the beaver builder for a main image under the navbar?

I have made a page template , but i do not know how I can allow BB to use a row under the navbar, I can add rows when the navbar ends, but it will not allow me to add a row in the header. I would like the transparent navbar be able to be able to float above an image I add using beaver builder.

Can this be accomlished? Thanks

Hi PK,

The Beaver plugin usually replaces the content but you can indeed adapt your layout to modify that.

If understand well, you would like the Beaver to control the entire main section of your website and only have Beans Header (over Beaver first row which has an image and Footer right?

yes that is exctly what i want to do 🙂 The navbar will be over the content, so i can use beaver builder to layout the entir esite. but beans controls the footer. That way i will have more of a hands on approach where I can add a bacground image , titles in the header , button etc using beaver builder and not have to code in the bg, title, sub title, butoons etc in the backend.

So the navbar to be on top of the content, the main div controlled by beaver builder and a footer controlled by beaver builder.

Thanks so much for the help, really appreciate it.

Hi any update please thanks. Itching to get on 🙂

Hey PK,

Here is the snippet I suggest which you can add to your child theme functions.php:

add_action( 'wp', 'example_beaver_setup' );

function example_beaver_setup() {

 // Only apply if Beaver builder is enabled.
 if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {

   // Remove layout control.
   add_filter( 'beans_layout', '__return_false' );

   // Remove all main div and their hooks.
   beans_remove_markup( 'beans_fixed_wrap[_main]', true );
   beans_remove_markup( 'beans_main_grid', true );
   beans_remove_markup( 'beans_primary', true );

   // Adjust attributes.
   beans_remove_attribute( 'beans_main', 'class', 'uk-block' );

    // Modify the loop with only the_content which fires Beaver.
    beans_modify_action_callback( 'beans_loop_template', 'example_loop_for_beaver' );

 }

}

function example_loop_for_beaver() {

  if ( have_posts() ) :

   while ( have_posts() ) : the_post();

      the_content();

    endwhile;

 endif;

}

If you want to have the header above the main content, you may just add the following to your style.less or style.css (which ever one you chose for your child theme).

.fl-builder .tm-header {
    position: absolute;
    width: 100%;
    z-index: 10;
    background-color: rgba(255, 255, 255, .95);
}

In the example above, I made the header slightly transparent but you can adjust it to your need.

Note that it will only apply when Beaver is used so your other pages still look great 🙂

Happy coding,

Hi thanks so much for the help, I have added the code to the functions.php child theme. I am using totem from theme butler. I have also added the css to style.css in my child theme folder. When I look at my page and activat beaver builder , it is the same as before. I cant add a row anywhere near the menu.

https://cloudup.com/cqlDYLdXikS

As you can see I can only add after header.

Thanks

Hi I have figured it out 🙂 I used the child theme that cam with beans and now it works perfectly. I love the way that you show the code so we can see what you did to accomplish things, instead of speaking a whole load of php code.

I think I have finally found my Framework 🙂

One piece of advice if you dont mind. I know it takes time but a tutorial on maybe making a theme from scratch with customizer options, google fonts etc, something that you could use for a client or even sell on Themeforest, will make a lot of people switch to beans and it is something NO other framework has, and I mean NO other free GPL framework, from Underscores to Runway, to Unyson.

Just my 2 cents

Have a great weekend

Thanks again

Hey PK,

I am glad to here it works as expected and that you are starting to find Beans magic. Thanks for your feedback about the tutorials which is probably the number one request and the moment and I definitely agree with you.

As you said, it takes a lot time to record video tutorials and at this stage, we don't have someone on board to do so (remember Beans is fairly new and a community driven project).

Beans is growing rapidely and I trust that video tutorials will come in the future which will again considerably increase Beans popularity. It is also good for Beans to grow in a steady path and I can insure that its popularity is growing on a daily basis.

Once again, thanks for your feedback and for being part of Beans Community,