Transparent Header Headaches

Followed the guide here:

Now I’ve got a transparent header but…

  1. There’s a brief doubling of the header text when I scroll
  2. My background image is dark. So my header font is white. The rest of my site has white backgrounds. My header background is set to black. But when I scroll below the background image the black header background does not appear so I’ve got white font on a white background. Can I get the header background to appear below the image?
  3. My header links’ hover font is messed up… one of the links (but not always the same link) seems to always be in hover mode even when not hovering.

Made a screencapture video to help show what’s going on in case the description above is not clear. Please take a look.

Thanks in advance for your help!


This is because you’re using the Fixed header layout which adds two <header> tags to the page. One being fl-page-header-fixed and the other fl-page-header-primary, but both include the fl-page-header class which is what you’re using in the CSS for the transparent header. As they both use that class they’re both using that CSS which is causing the weird doubling effect.

To resolve your issue, replace the CSS you’re currently using with the following:

.home .fl-page-header-primary,
.home .fl-page-header-primary .fl-page-header-wrap {
    background-color: transparent;
    border-bottom-style: none;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 10;

This should also resolve your issue with the logo and navigation links being white on the white background.

In regard to the links having the orange color, this is because all menu links are anchor links to content on that page so they all have the current-menu-item class. You can resolve this using the code below.

        // Cache selectors
        var lastId,
            lastIdTop = 0, 
            topMenu = $("#menu-header-menu-1"),
            topMenuHeight = topMenu.closest('.fl-row').outerHeight()+1,
            // All list items
            menuItems = topMenu.find("a"),
            scrollItems = [];
            topMenu.find( 'a[href*="#"]:not([href="#"])' ).each(function(){
                var hash = $(this).attr('href').split('#').pop();
                if( hash && $( '#' + hash ).length > 0 ){
                    scrollItems.push( {
                        hash: hash,
                        id: $( this ).parent().attr('id')
                    } );
        // Bind to scroll
           // Get container scroll position
           var fromTop = $(this).scrollTop()+topMenuHeight - 30,
               activeItem = [];
           console.log('fromTop: ', fromTop);
           for (var j = 0; j < scrollItems.length; j++){
                if ( $( '#' + scrollItems[j].hash ).offset().top < fromTop ) {
                    activeItem = scrollItems[j];
                    lastIdTop = $( '#' + activeItem.hash ).offset().top + $('#'+ activeItem.hash ).height();
            if (lastId !== activeItem.hash ) {
                lastId = activeItem.hash;
                console.log( 'total: ', lastIdTop );
                // Set/remove active class
                $( '#' + ).addClass('current-menu-item').addClass('current_page_item');     
            else if( lastIdTop < fromTop ) {
                console.log( 'removing active: ', lastId );
})( jQuery );

However, you may need to remove the apostrophe from the #let's_talk ID.