• 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

Altitude Header – Change the color when scrolled

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 › Altitude Header – Change the color when scrolled

This topic is: not resolved

Tagged: altitude, color, font, header, navigation menu

  • This topic has 5 replies, 3 voices, and was last updated 7 years, 2 months ago by cubicle10.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 24, 2015 at 6:04 am #149014
    mattcarr007
    Member

    Hi All

    I am working with the Altitude theme at the moment and am having problems with making changes to the header.

    When the website opens i want it in the default setup of a transparent header with white font in the navigation menu.
    But when it is scrolled down by the visitor, I would like the header to change to an Orange color (not the default black) and have the navigation menu in Blue.

    I have found something very similar at http://dustn.tv/ but in this site they use a white header background with a dark grey navigation menu font.

    Is this something achievable with the style.css or is it more complex?
    I have tried several times with firebug to analyze the code but whatever it is I am not getting it so hence my request for help here.

    I would really appreciate any assistance in what coding that needs changing and/or adding.
    Because i am changing an existing website to this theme, I am working 'local' so cannot give you a URL

    Many thanks in advance
    Matt

    http://local
    April 24, 2015 at 9:12 am #149030
    ellenstevens
    Member

    Matt:

    Try looking on your style.css file for code similar to:

    .site-header.dark {
    background-color: #fff;
    color: #000;
    }

    (In Altitude Pro, .site-header .dark is the second menu when you scroll down. The initial menu code is labeled .site-header.)

    I would go to http://www.w3schools.com/tags/ref_colorpicker.asp? to find your preferred orange and blue shade and change out the colors in the above code. For example:

    .site-header.dark {
    background-color: #D2691E;
    color: #4775A3;
    }

    Hope that helps.

    April 24, 2015 at 9:46 am #149033
    mattcarr007
    Member

    Hi Ellen

    Thanks so much for your reply, that has certainly got the header color change correct and the way i wanted it to look.

    Just one thing however, with the code that you kindly advised me to edit, the navigation menu font color doesn't change.
    The font remains white when i scroll down and I was hoping that it would change to the #4775A3 blue color.

    Have i miss-understood or is this a different section that needs editing?

    Your help is greatly appreciated,
    Kind regards
    Matt

    April 24, 2015 at 10:04 am #149036
    ellenstevens
    Member

    Matt,

    I can't see your code, so I'm shooting in the dark here. Look for these two areas to change the title font and menu font:

    Initial Font Appearance:

    .site-header {
    background-color: #fff;
    color: #000;
    }

    Scroll Down Font Appearance:

    .site-header.dark {
    background-color: #D2691E;
    color: #4775A3;
    }

    April 24, 2015 at 10:13 am #149037
    mattcarr007
    Member

    Hi Ellen

    Sorry I have just read through your response again and then realized where I was going wrong withe the navigation menu font color.

    You had pointed me exactly in the right direction in your first sentence but just changed the one bit of code and didn't look for the rest that i needed to.

    I found that if followed your advice about looking for .site-header .dark and then I also changed the following bit of style.css code, I got exactly the effect that I was after with the navigation menu font color changing when i scroll:

    .site-header.dark .genesis-nav-menu a {
    	color: #4775A3;
    	padding: 20px 15px;
    }

    Thanks again for your great advice, I really do appreciate it.
    Kind regards
    Matt

    April 26, 2015 at 9:57 am #149191
    cubicle10
    Member

    Thanks @ellenstevens!


    E.J.
    Cubicle10

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 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

© 2022 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