• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Infinity Pro – Header not transparent?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro – Header not transparent?

This topic is: not resolved

Tagged: css, Infinity Pro, Logo, stylesheet, transparent

  • This topic has 7 replies, 7 voices, and was last updated 3 years, 5 months ago by hilarync.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 29, 2016 at 10:05 am #196778
    brightisland
    Participant

    I've just installed Infinity Pro to help me give this site a makeover, but I can't figure out why the header isn't transparent. The only tweak I did of the css was to float:right the header menu.

    Thanks in advance. 🙂

    ETA: Coming Soon plugin is in place so let me know if site isn't accessible with backdoor link.

    http://www.gracechurchcc.com/2017
    November 29, 2016 at 12:56 pm #196788
    Victor Font
    Moderator

    Once you add the image to the header, it uses a different CSS block. It is using the .header-image.front-page .site-header CSS in style-front.css at line 15. This overrides .front-page .site-header, which has the transparent background, at line 10 in the same file. If you want to keep the header transparent, add the !important keyword in the background declaration in the line 10 code.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    December 20, 2016 at 5:28 am #197873
    healingthoughts
    Member

    It does not work for me

    I did the following:

    original:
    .front-page .site-header {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    }

    .front-page .white .site-header,
    .header-image.front-page .site-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;

    modified:
    .front-page .site-header {
    background-color: transparent !important;
    border-bottom: 1px solid transparent;
    }

    .front-page .white .site-header,
    .header-image.front-page .site-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;

    It is this what you suggest?

    Additional information:
    Whatever I do change in these two css there is no effect on startpage.

    What am I doing wrong?

    January 5, 2017 at 2:46 pm #198805
    pruningtogrow
    Member

    Did this issue ever become resolved? I would love to know the answer to this.

    January 7, 2017 at 1:11 am #198916
    dsweeney0126
    Member

    I was able to get Victor's suggestion to work for me.

    Wondering if anyone has had luck changing the header back to white on the scroll down. Can't seem to solve that one. Any help would be greatly appreciated!

    Cheers,
    --Dan

    January 7, 2017 at 7:40 pm #198979
    PatriciaM
    Member

    Thank you @VictorFont for the explanation and advice!

    I've been trying to figure this out myself, and I think I've finally got both pieces of the puzzle:

    1. Transparent background for site header on front page when using a logo (header image)
    2. White background for site header on front page when scrolling down

    Here is the CSS I used in the style-front.css

    .front-page .site-header,
    .header-image.front-page .site-header {
    background-color: transparent;
    border-bottom: 1px solid #a8a8a8;
    }

    .front-page .white .site-header {
    background-color: #fff !important;
    border-bottom: 1px solid #eee;
    }

    Note: I left the "border-bottom" line on the transparency because I like the look. But if you don't want a line then just put "transparent" there, too.

    p.s. If you don't see the changes immediately, remember to clear your cache before refreshing. Sometimes I forget this step and I wonder why my code isn't showing up. 😛

    January 7, 2017 at 9:35 pm #198984
    dsweeney0126
    Member

    Boom! Thanks Patricia. That really helped.

    December 31, 2019 at 3:44 pm #495710
    hilarync
    Participant

    Thanks Patricia! That worked perfectly.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble