Beaver Builder Theme

Make the menu sticky on mobile devices

Original request was

Sticky Menu Query

Please follow the steps at below:

Step 1: Open the style.css file on Notepad+ or any other editor, go to media queries section (my end line no 2890-2893) and remove the following CSS:

Step 2: Go to gbeaver/assets/js folder and open the gbeaver-scripts.js file. Now replace this existing code

WITH

Adding Toggle Search Icon at Header Right Widget Area

toggle-search-form

Step : 1

Login to Dashboard, navigate to Appearance -> Widgets page, drag&drop the Text widget in Header Right widget area. Enter this HTML code into textarea and save the widget. Note: FontAwesome icon is using here. Make sure you enabled the FontAwesome from GBeaver -> General Settings section.

 

Step 2:

Open the gbeaver/lib/structure/search.php file and add this PHP codes at end of the file:

 

Step 3:

Open the gbeaver/assets/js/gbeaver-scripts.js file and add the following JS code at line no 79:

 

Step 4:

Lastly open the style.css file and drop the following CSS at end of the file:

Transparent Header with Hero Banner

Transparent Header with Hero Image

Transparent header effect is available on GBeaver 1.0.4. You can add this transparent header effect on any post type (posts, pages or CPTs). See the procedure below to add this header effect:

Step 1: Login to Dashboard and navigate to add/edit WP Editor screen. You may, first, need to enable the WordPress custom fields option for post types like page, post or custom post type page, if it is disabled.

Enable Meta Box

Step 2: Scroll down the page and go to “Custom Fields” section. Click on “Enter new” link, enter “transparent_header” in Name input box and “yes” into Value input box. Click on “Add Custom Field” button and save the meta data. (See the attached image)

Add Meta Data

Click on “Publish” or “Update” button and live the page. Checkout the page on the browser and see the transparent effect.

See the live demo here.

Note: If you are using ACF or any other plugin for custom meta fields on your site, you can also do it using that plugin. Just remember that meta key name would be “transparent_header” and meta value would be “yes”.

How do you change the default colors

GBeaver theme provides you with inbuilt color assets option at Customizer. So users can easily overwrite the default color with a new color without editing the style.css file.

Just login to Dashboard, navigate to GBeaver theme options page, expand the General Settings section and enable the Color Assets. Have a look at the screenshot below:

enable-color-assets

customizerNow click on Appearance -> Customize link and you will be redirected to another page. Click on “Colors & Padding” panel, expand the “Global Colors” section and setup the link color, link hover color, body text color, heading color, buttons color, etc. Lastly, click on “Save & Publish” button and save the settings. Let us know what you think about this amazing feature in our comments section!

How to replace default google fonts with new one

GBEAVER Theme uses “Poppins” font for heading and “Alegreya Sans” font for body text. Users can easily replace these two fonts with their custom fonts.

Example:

For instance, If you use “Montserrat” font for heading & “Sorts Mill Goudy” for body text. Navigate to google fonts site (https://fonts.google.com/) and search the “Montserrat”. Now click on “red plus” icon and select the font. Similarly, apply the same procedure for “Sorts Mill Goudy” font.

Now expand the “Fonts Selected” panel and click on “customize” link. Setup the font’s weight like attached image.

fonts-weight

Click on “Embed” link and copy the blue part only at standard section (see the image below).

select-font-family

Subsequently, you will open the functions.php file from gbeaver folder and go to “gbeaver_enqueue_scripts_styles” function. Find the text “Alegreya+Sans:300,400,700|Poppins:700” and replace it with “Montserrat:700|Sorts+Mill+Goudy:400,400i”. Save the file.

Next open the style.css file and replace the ‘Poppins’ with ‘Montserrat’ (apply search & replace method). Similarly, replace ‘Alegreya Sans’, sans-serif with ‘Sorts Mill Goudy’, serif. Save the CSS file. Now refresh your site and see the changes.

How do you add widgets below the off canvas menu panel

GBeaver theme has inbuilt off canvas menu widget using which you can easily add off canvas menu panel on your site. Here we describe you to add the widgets below the off canvas menu.

Step 1: Registering a Sidebar

Open the functions.php file and add the following snippets at end of the file.

Step 2: Placing new sidebar below the off canvas menu

Again open the functions.php file and add this code there

Step 3: Adding “Off Canvas Menu” widget

Login to dashboard and navigate to Appearance -> Widgets page. Drag & drop the “Off Canvas Menu” widget at Header Right widget area. You can place it at any other widget areas.

Off Canvas Menu Widget
Off Canvas Menu Widget

Step 4: Adding widgets in new sidebar

Drag & Drop the widgets in Off Canvas sidebar like attached screenshot

Widgets in Off Canvas Sidebar

All procedure is completed now. Refresh your home page and see the output

Widgets Below Menu
Widgets Below Menu

Add Cart Icon into Add-To-Cart button

Cart icon into add-to-cart button
Cart icon into add-to-cart button

It is not a very complicated things. You can do it via CSS. Open the woo.css file from gbeaver/assests/css folder and drop this CSS at end of the file

Now refresh your shop page and see the output.

Creating Shrink Header on GBeaver Theme

Sticky header effect is inbuilt in GBeaver Theme. Using this option you can easily add the shrink effect at your site header.

Step 1: Enabling the sticky header effect.

Login to Dashboard, navigate to GBeaver options page and expend the General Settings section. Enable the Sticky Header feature. Click on “Save  Changes” button and save the settings.

Sticky Site Header

Sticky Site Header

Step 2: Adding Some Custom CSS

Open the style.css file from gbeaver folder and add the following CSS.

Step 3: Editing the JS file

This is the last steps. Open the gbeaver-scripts.js file from assets/js folder and replace the following JS code

WITH

All done now. Refresh your site now and checkout the shrink header effect.