# Customization

**URL:** https://community.wpbeaverbuilder.com/c/customization/13.md

[Latest](https://community.wpbeaverbuilder.com/latest.md) · [Categories](https://community.wpbeaverbuilder.com/categories.md) · [Tags](https://community.wpbeaverbuilder.com/tags.md)

---

## [About the Customization category](https://community.wpbeaverbuilder.com/t/about-the-customization-category/8398)

<div class="topic-metadata">

**Author:** [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Replies:** 0\
**Last updated:** [April 27, 2019, 10:44pm UTC](https://community.wpbeaverbuilder.com/t/about-the-customization-category/8398 "2019-04-27T22:44:35Z")

</div>

Discuss customization with other users. You can also hire developers and agencies from our Recommended Builders page page.

---

## [Updating the website look while keeping the internal structure (pages, headings) the same](https://community.wpbeaverbuilder.com/t/updating-the-website-look-while-keeping-the-internal-structure-pages-headings-the-same/20314)

<div class="topic-metadata">

**Author:** [@kacommunity](https://community.wpbeaverbuilder.com/u/kacommunity)\
**Replies:** 0\
**Last updated:** [July 17, 2026, 8:12pm UTC](https://community.wpbeaverbuilder.com/t/updating-the-website-look-while-keeping-the-internal-structure-pages-headings-the-same/20314 "2026-07-17T20:12:17Z")

</div>

This is my first using of Beaver Builder. I have a website someone built in Beaver Builder with Beaver Themer. It is laid out exactly as I wanted in terms of page structure and headings, etc. I want to maintain that stru…

---

## [Free dark mode toggle plugin that uses BB Global Colours](https://community.wpbeaverbuilder.com/t/free-dark-mode-toggle-plugin-that-uses-bb-global-colours/20124)

<div class="topic-metadata">

**Author:** [@everlasting-chase](https://community.wpbeaverbuilder.com/u/everlasting-chase)\
**Replies:** 2\
**Last updated:** [June 26, 2026, 10:11am UTC](https://community.wpbeaverbuilder.com/t/free-dark-mode-toggle-plugin-that-uses-bb-global-colours/20124 "2026-06-26T10:11:00Z")

</div>

I was in need of an easy to use dark mode toggle that uses Beaver Builder’s Global Colours and came up with this plugin. :backhand\_index\_pointing\_right: GitHub - ttldsgn/bb-custom-dark-mode: A pro-grade dark mode engine…

---

## [Can't change color on hamburger menu](https://community.wpbeaverbuilder.com/t/cant-change-color-on-hamburger-menu/19827)

<div class="topic-metadata">

**Author:** [@sharicn](https://community.wpbeaverbuilder.com/u/sharicn)\
**Replies:** 2\
**Last updated:** [August 1, 2025, 11:34pm UTC](https://community.wpbeaverbuilder.com/t/cant-change-color-on-hamburger-menu/19827 "2025-08-01T23:34:12Z")

</div>

Hello, I’ve searched and searched for answers and nothing I’ve tried works, so hoping someone here can help out. I am trying to change the color of my hamburger menu to match the rest of my site (we change our accent co…

---

## [Focus keyphrase](https://community.wpbeaverbuilder.com/t/focus-keyphrase/19735)

<div class="topic-metadata">

**Author:** [@edwin.nieves](https://community.wpbeaverbuilder.com/u/edwin.nieves)\
**Replies:** 3\
**Last updated:** [June 29, 2025, 7:54pm UTC](https://community.wpbeaverbuilder.com/t/focus-keyphrase/19735 "2025-06-29T19:54:00Z")

</div>

I use Yoest for SEO scoring in the pages I built with BB. I am getting a red dot saying “focus keyphrase not set”. How do I enter the keyphrases using BB? I don’t want to go outside BB as not to mess up the pages.

---

## [Time Condition for Beaver Themer Conditional Logic](https://community.wpbeaverbuilder.com/t/time-condition-for-beaver-themer-conditional-logic/19587)

<div class="topic-metadata">

**Author:** [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Replies:** 1\
**Last updated:** [May 13, 2025, 10:58pm UTC](https://community.wpbeaverbuilder.com/t/time-condition-for-beaver-themer-conditional-logic/19587 "2025-05-13T22:58:30Z")

</div>

1 . Create a shortcode to compare the current time to a specific time range, and return true or false. start and end time are set in shortcode parameters, making it re-usable. add\_shortcode('check\_time\_range', 'check\_t…

---

## [Is there a way to make multiple UABB infobox modules the same height](https://community.wpbeaverbuilder.com/t/is-there-a-way-to-make-multiple-uabb-infobox-modules-the-same-height/19509)

<div class="topic-metadata">

**Author:** [@sbrennan](https://community.wpbeaverbuilder.com/u/sbrennan)\
**Replies:** 0\
**Last updated:** [March 28, 2025, 1:21pm UTC](https://community.wpbeaverbuilder.com/t/is-there-a-way-to-make-multiple-uabb-infobox-modules-the-same-height/19509 "2025-03-28T13:21:16Z")

</div>

Hi, Is there a way to set 3 UABB infoboxes that are in a 3-column row to be the same size no matter the content? I know I can set a minimum height and force them all the same size. But that size is shown across all plat…

---

## ["Menu" and "Menu & Social Icons" options are grayed out in Top Bar Layout](https://community.wpbeaverbuilder.com/t/menu-and-menu-social-icons-options-are-grayed-out-in-top-bar-layout/19467)

<div class="topic-metadata">

**Author:** [@Lousyviking](https://community.wpbeaverbuilder.com/u/Lousyviking)\
**Replies:** 0\
**Last updated:** [March 18, 2025, 2:24pm UTC](https://community.wpbeaverbuilder.com/t/menu-and-menu-social-icons-options-are-grayed-out-in-top-bar-layout/19467 "2025-03-18T14:24:58Z")

</div>

In the Top Bar Layout tab in customizer, the options of choosing either Menu or Menu & Social Icons to appear in the Top Bar are grayed out and not selectable. My only options are Text, Text & Social Icons, and Scocial…

---

## [Making a non transparent mobile menu when using a transparent navi on tablet/desktop](https://community.wpbeaverbuilder.com/t/making-a-non-transparent-mobile-menu-when-using-a-transparent-navi-on-tablet-desktop/19382)

<div class="topic-metadata">

**Author:** [@brandon.morgan](https://community.wpbeaverbuilder.com/u/brandon.morgan)\
**Replies:** 0\
**Last updated:** [February 14, 2025, 2:08am UTC](https://community.wpbeaverbuilder.com/t/making-a-non-transparent-mobile-menu-when-using-a-transparent-navi-on-tablet-desktop/19382 "2025-02-14T02:08:33Z")

</div>

Hi there! I’m using a transparent menu from Beaver Themer on desktop and tablet, but I’d like a non-transparent menu on mobile because it’s getting lost over my hero images. I’m new to this type of design, and I’m sure …

---

## [Toggle button for showing and hiding a row](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770)

<div class="topic-metadata">

**Author:** [@Mars](https://community.wpbeaverbuilder.com/u/Mars)\
**Replies:** 16\
**Last updated:** [January 2, 2025, 7:59pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770 "2025-01-02T19:59:22Z")

</div>

I created a similar effect for Elementor, but had issues doing the same for BB. wpbeaverworld was kind enough to show me how to do the same thing on BB. Here are the code snippets for implementing this custom functionali…

---

## [CSS Variables not allowed?](https://community.wpbeaverbuilder.com/t/css-variables-not-allowed/19076)

<div class="topic-metadata">

**Author:** [@thefrog](https://community.wpbeaverbuilder.com/u/thefrog)\
**Replies:** 3\
**Last updated:** [November 5, 2024, 8:38pm UTC](https://community.wpbeaverbuilder.com/t/css-variables-not-allowed/19076 "2024-11-05T20:38:45Z")

</div>

I’m getting the red X in the CSS editor on the top three “–x” variables when trying to use this CSS. Is there a way around this in BB? .custom-border { --s: 50px; /\* the size on the corner \*/ --t: 5px; /\* the thick…

---

## [Change which module group is the default selected](https://community.wpbeaverbuilder.com/t/change-which-module-group-is-the-default-selected/8738)

<div class="topic-metadata">

**Author:** [@codepuncher](https://community.wpbeaverbuilder.com/u/codepuncher)\
**Replies:** 4\
**Last updated:** [August 8, 2024, 8:26pm UTC](https://community.wpbeaverbuilder.com/t/change-which-module-group-is-the-default-selected/8738 "2024-08-08T20:26:43Z")

</div>

Hi all, Using the snippet below, you can change the default module group from “Standard Modules” to a choice of your own. Requirements: PHP 7 illuminate/support package (provides Laravel Collections) \<?php declare(…

---

## [\<!--more--\> in BB text module](https://community.wpbeaverbuilder.com/t/more-in-bb-text-module/18760)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [July 16, 2024, 5:32pm UTC](https://community.wpbeaverbuilder.com/t/more-in-bb-text-module/18760 "2024-07-16T17:32:18Z")

</div>

add\_filter( 'fl\_builder\_render\_module\_content', function( $content, $module ) { if ( $module instanceof FLRichTextModule && strstr( $content, '\<!--more' ) ) { $content = str\_replace( '\<div class="fl-rich-text"\>', '…

---

## [Is there a way I can change the scrolling header background to be different to the set header background?](https://community.wpbeaverbuilder.com/t/is-there-a-way-i-can-change-the-scrolling-header-background-to-be-different-to-the-set-header-background/18735)

<div class="topic-metadata">

**Author:** [@kategorgeous](https://community.wpbeaverbuilder.com/u/kategorgeous)\
**Replies:** 0\
**Last updated:** [July 8, 2024, 9:45am UTC](https://community.wpbeaverbuilder.com/t/is-there-a-way-i-can-change-the-scrolling-header-background-to-be-different-to-the-set-header-background/18735 "2024-07-08T09:45:51Z")

</div>

Hi, I have just started a new site and would like the header background to change colour when the user scrolls. Currently the header area has a turquoise background colour and I can see that I can change the logo in BB …

---

## [Subscribe form.. email from user and not wordpress](https://community.wpbeaverbuilder.com/t/subscribe-form-email-from-user-and-not-wordpress/18610)

<div class="topic-metadata">

**Author:** [@jimbob](https://community.wpbeaverbuilder.com/u/jimbob)\
**Replies:** 3\
**Last updated:** [June 3, 2024, 1:43pm UTC](https://community.wpbeaverbuilder.com/t/subscribe-form-email-from-user-and-not-wordpress/18610 "2024-06-03T13:43:34Z")

</div>

Hi, Ive setup a subscribe form which works great except… i would like the email which is sent to me, to be sent from the users email address (which they entered on the subscribe form) and not wordpress@mydomainname.com …

---

## [Reliable way to disable smooth scroll, or fix scroll offset when linking to hashed linked from an external site?](https://community.wpbeaverbuilder.com/t/reliable-way-to-disable-smooth-scroll-or-fix-scroll-offset-when-linking-to-hashed-linked-from-an-external-site/18485)

<div class="topic-metadata">

**Author:** [@ymohebbi](https://community.wpbeaverbuilder.com/u/ymohebbi)\
**Replies:** 0\
**Last updated:** [April 17, 2024, 9:32pm UTC](https://community.wpbeaverbuilder.com/t/reliable-way-to-disable-smooth-scroll-or-fix-scroll-offset-when-linking-to-hashed-linked-from-an-external-site/18485 "2024-04-17T21:32:07Z")

</div>

I have a mostly single-page website: Boston Sings \[BOSS\] A Cappella Festival | CASA Events I have several anchor links on my main nav that link to sections on the home page. Smooth scrolling was really messing up where …

---

## [Scrollspy setup for BB theme or anyone using Bootstrap 4 with BB](https://community.wpbeaverbuilder.com/t/scrollspy-setup-for-bb-theme-or-anyone-using-bootstrap-4-with-bb/18477)

<div class="topic-metadata">

**Author:** [@KevDev](https://community.wpbeaverbuilder.com/u/KevDev)\
**Replies:** 0\
**Last updated:** [April 15, 2024, 8:18pm UTC](https://community.wpbeaverbuilder.com/t/scrollspy-setup-for-bb-theme-or-anyone-using-bootstrap-4-with-bb/18477 "2024-04-15T20:18:36Z")

</div>

---

## [Remove attachments from link autosuggest results](https://community.wpbeaverbuilder.com/t/remove-attachments-from-link-autosuggest-results/18467)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 1\
**Last updated:** [April 11, 2024, 9:28pm UTC](https://community.wpbeaverbuilder.com/t/remove-attachments-from-link-autosuggest-results/18467 "2024-04-11T21:28:31Z")

</div>

add\_filter( 'fl\_builder\_auto\_suggest\_lookup', function( $data, $action ) { if ( 'fl\_as\_links' === $action ) { global $wpdb; $data = array(); $like = FLBuilderAutoSuggest::get\_like(); $types = FLBuilderLoop::…

---

## [Remove hover over underline for Advanced Tabs](https://community.wpbeaverbuilder.com/t/remove-hover-over-underline-for-advanced-tabs/18439)

<div class="topic-metadata">

**Author:** [@cari.showdme](https://community.wpbeaverbuilder.com/u/cari.showdme)\
**Replies:** 0\
**Last updated:** [April 2, 2024, 6:36pm UTC](https://community.wpbeaverbuilder.com/t/remove-hover-over-underline-for-advanced-tabs/18439 "2024-04-02T18:36:12Z")

</div>

I’m trying to remove the underlining that shows up when using the advanced tabs module. See image. When you hover over, it underlines the text in the tab title, but I don’t want it there. I’ve tried a few CSS variations…

---

## [Compile layout and global css with SCSS](https://community.wpbeaverbuilder.com/t/compile-layout-and-global-css-with-scss/18401)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 20, 2024, 1:45pm UTC](https://community.wpbeaverbuilder.com/t/compile-layout-and-global-css-with-scss/18401 "2024-03-20T13:45:01Z")

</div>

add\_filter( 'fl\_builder\_render\_css', function( $css, $nodes, $global\_settings, $include\_global ) { require\_once FL\_BUILDER\_DIR . 'includes/vendor/sass/autoload.php'; $compiler = new ScssPhp\\ScssPhp\\Compiler(); try { …

---

## [Sitecore to WordPress migration](https://community.wpbeaverbuilder.com/t/sitecore-to-wordpress-migration/18387)

<div class="topic-metadata">

**Author:** [@haritpanchal\_softweb](https://community.wpbeaverbuilder.com/u/haritpanchal_softweb)\
**Replies:** 1\
**Last updated:** [March 18, 2024, 8:41pm UTC](https://community.wpbeaverbuilder.com/t/sitecore-to-wordpress-migration/18387 "2024-03-18T20:41:08Z")

</div>

I am planning to migrate site from Sitecore to WordPress in such a way so that I can view and edit the migrated pages using Beaver Builder. Can you suggest required approach to do seamless migration to Beaver Builder.

---

## [Change menu for logged in users](https://community.wpbeaverbuilder.com/t/change-menu-for-logged-in-users/18364)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 11, 2024, 1:30pm UTC](https://community.wpbeaverbuilder.com/t/change-menu-for-logged-in-users/18364 "2024-03-11T13:30:49Z")

</div>

Create new menu called logged-in then use following filter add\_filter( 'wp\_nav\_menu\_args', function( $args ) { if ( 'header' === $args\['theme\_location'\] && is\_user\_logged\_in() ) { $args\['menu'\] = 'logged-in'; } ret…

---

## [Allow HTML etc in Themer custom\_field connection](https://community.wpbeaverbuilder.com/t/allow-html-etc-in-themer-custom-field-connection/18363)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 11, 2024, 10:49am UTC](https://community.wpbeaverbuilder.com/t/allow-html-etc-in-themer-custom-field-connection/18363 "2024-03-11T10:49:29Z")

</div>

In Themer 1.4.9.1 custom\_fields are now passed through wp\_kses to strip any malicious HTML/JS to bypass this just add the following to your child theme functions.php add\_filter( 'fl\_theme\_builder\_custom\_field\_kses', '\_\_…

---

## [How Can I Create A Fixed Attachment Video Background. Help Please!](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838)

<div class="topic-metadata">

**Author:** [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Replies:** 12\
**Last updated:** [February 20, 2024, 6:31pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838 "2024-02-20T18:31:53Z")

</div>

Hi there! I am trying to figure out how I can make the video background to stay fixed as you can do with images. I have tried tons of CSS and keep failing. The video I am looking to make a fixed background video attachm…

---

## [Can't change active menu link color](https://community.wpbeaverbuilder.com/t/cant-change-active-menu-link-color/18296)

<div class="topic-metadata">

**Author:** [@friendlygeek](https://community.wpbeaverbuilder.com/u/friendlygeek)\
**Replies:** 0\
**Last updated:** [February 20, 2024, 4:44am UTC](https://community.wpbeaverbuilder.com/t/cant-change-active-menu-link-color/18296 "2024-02-20T04:44:28Z")

</div>

Hi, I’ve been reading all the previous discussions on this topic I can find, and none of the suggestions are working for me! I’ve tried to find answers but the manuals don’t seem to help either. My one pager site https:…

---

## [Remove WP Core colours from Global Colours](https://community.wpbeaverbuilder.com/t/remove-wp-core-colours-from-global-colours/18275)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 7:29pm UTC](https://community.wpbeaverbuilder.com/t/remove-wp-core-colours-from-global-colours/18275 "2024-02-13T19:29:34Z")

</div>

add\_filter( 'fl\_wp\_core\_global\_colors', '\_\_return\_empty\_array' ); add\_filter( 'fl\_builder\_global\_colors\_json', function( $json ) { unset( $json\['themeJSON'\]\['color'\]\['palette'\]\['default'\] ); return $json; });

---

## [Remove Global Styles Menu Item](https://community.wpbeaverbuilder.com/t/remove-global-styles-menu-item/18271)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 1\
**Last updated:** [February 13, 2024, 10:06pm UTC](https://community.wpbeaverbuilder.com/t/remove-global-styles-menu-item/18271 "2024-02-13T22:06:23Z")

</div>

/\*\* \* Remove Globa Styles Menu Item \* Unless user ID is 1 \* @since 2.0 2017 \*/ add\_filter( 'fl\_builder\_main\_menu', function( $menu ){ if ( 1 !== get\_current\_user\_id() ) { unset( $menu\['main'\]\['items'\]\[61\] ); } r…

---

## [Global Styles, disable editing names](https://community.wpbeaverbuilder.com/t/global-styles-disable-editing-names/18272)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 3:07pm UTC](https://community.wpbeaverbuilder.com/t/global-styles-disable-editing-names/18272 "2024-02-13T15:07:14Z")

</div>

FLBuilder.addHook( 'showGlobalStyles', function(){ setTimeout(function(){ jQuery('.fl-global-color-field-input' ).attr( 'disabled', 'disabled' ); }, 250 ); });

---

## [Javascript and relative links in urls](https://community.wpbeaverbuilder.com/t/javascript-and-relative-links-in-urls/18270)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 2:11pm UTC](https://community.wpbeaverbuilder.com/t/javascript-and-relative-links-in-urls/18270 "2024-02-13T14:11:23Z")

</div>

As of 2.8 and 2.7.4.3 we have to use esc\_url to sanitize links to stop your websites getting hacked. This can cause issues when you add sample-page as a link, or something like javascript:SomeFunction() Tto get around …

---

## [CSS help for pseudo classes (marker vs. before)](https://community.wpbeaverbuilder.com/t/css-help-for-pseudo-classes-marker-vs-before/18219)

<div class="topic-metadata">

**Author:** [@sh-2022](https://community.wpbeaverbuilder.com/u/sh-2022)\
**Replies:** 0\
**Last updated:** [January 26, 2024, 8:33pm UTC](https://community.wpbeaverbuilder.com/t/css-help-for-pseudo-classes-marker-vs-before/18219 "2024-01-26T20:33:34Z")

</div>

Hi there, I have a page that has a custom bullet (list item image) on one page in a text editor - Our Favorite Swag, Tech Tools, and Gadgets | friEdTechnology. Note the yellow images, and the fact that they use ::befor…

[Next page](https://community.wpbeaverbuilder.com/c/customization/13.md?page=1)