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-contentthemesbb-themeincludesfixed-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
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)
