Styling the BB theme fixed header

 

Fixed Header Basics

There 4 options in the customizer (under Header > Header Layout)

  • Disabled
  • Fade In
  • Shrink
  • Fixed

Only Fade In is a separate header and can be used. You can find the file here :

wp-content\themes\bb-theme\includes\fixed-header.php


For swapping logos please see this excellent tutorial over at BeyondBeaver.com

Different logo for the fixed header in the Beaver Builder Theme

 

fixed-header-option

Remove a background image from a Fixed Header

When you set a background image it show in the fixed header too. If you add this CSS you remove it and show the set background color instead.

.fl-page-header-fixed, .fl-page-header-fixed { 

background-image: none; 

}

Add to the styles.css file in your child theme or in you customizer under Code > CSS Code

Add a background image to a Fixed Header

Set the customizer background image as before and remove from the main header. This allow to the use the customizer for image positioning.

.fl-page-header
{
	background-image: none;
}
.fl-page-header-fixed, .fl-page-header-fixed
{
	background-image: url(http://.....jpg);
}


Add to the styles.css file in your child theme or in you customizer under Code > CSS Code

Changing menu/navigation link colors

When you set a background image it show in the fixed header too. If you add this CSS you remove it and show the set background color instead.

 


/*Changes the text links 
------------------------------------------------ */

.fl-page-nav-wrap .navbar-nav > LI > A
{
 color: #FFFFFF;
}
.fl-page-nav-wrap .navbar-nav > LI > A:hover
{
 color: #FFC719 !important;
}

/* This may be needed with mega-menus*/
.fl-page-nav-wrap .navbar-nav > LI > A:focus
{
 color: #FFF !important;
}

/* Changes menu icons 
------------------------------------------------ */

.fl-page-header A, .fl-page-header A *, .fl-page-header A.fa {
 color: #FFFFFF; 
} 

/*Mobile Menus
 ------------------------------------------------ */ 

 @media (max-width: 767px) { 
.fl-page-nav-collapse UL.navbar-nav > LI > A {
 color: #FFFFFF; 
} 
.fl-page-nav-collapse UL.sub-menu LI A {
 color: #FFFFFF;
 }
 }

...and a few affiliate links (well you never know)

Beaver Tunnels - Release The Beaver
Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!