• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • PSD to Genesis
  • Personalized Genesis Child Theme
  • Custom Website
  • Rainmaker
  • Genesis Customizations

Christoph Herr

Solutions For Your Online Business

  • Home
  • Articles
  • Recommendations
  • About
  • Praise
  • Contact
  • Schedule a Call

How to use the darker site header in Altitude Pro by default

Last updated on June 24, 2016 by Christoph Herr 22 Comments

The Altitude Pro theme is a very popular and versatile Genesis child theme from Studiopress.

altitude pro site headerAltitude Pro makes use of jQuery to change the appearance of the site header that contains page title and navigation menu.

When you scroll down, the class .dark is added to the site header and removed when you get back to the top of the page.

Here are two options to change this behaviour:

1. Don’t change size or transparency when scrolling

Open global.js in /altitude-pro/js/ and delete lines 3 to 18.

2. Use the narrower, black “scrolling menu” by default.

Open global.js in /altitude-pro/js and delete lines 3 to 18.

Open functions.php and add the following code at the bottom of the file:

// Add class dark to .site-header

add_filter( 'genesis_attr_site-header', 'altitude_add_class' ); 

function altitude_add_class( $attributes ) {
$attributes['class'] = $attributes['class']. ' dark';
return $attributes;
}

After

altitude_pro_changed_navigation

I just saw that Neil Gee has written a comprehensive post with the title: “Add CSS Classes and Attributes to HTML elements in Genesis“. In it he is also covering the different genesis_attr Filters available to target different classes.

I might have learned the method from his post. So go to his site and enjoy the post.

Share this:

TwitterFacebookPinterestLinkedInEmail

Filed Under: Code Snippets Tagged With: Altitude Pro

Reader Interactions

Comments

  1. bloomer says

    January 29, 2016 at 11:39 am

    This method did not work for me. I wanted to Use the narrower, black “scrolling menu” by default.

    Reply
    • Christoph Herr says

      January 29, 2016 at 11:44 am

      Hi,

      thank you for using my tutorial.

      It looks fine to me on the website you linked to.
      http://screencast.com/t/fRkr7rh2sY3v

      I suggest you clear the browser cache.

      Reply
      • Christoph Herr says

        January 29, 2016 at 11:50 am

        Oh, I see it now.
        You did not delete the lines from global.js.
        When you scroll back up, the class .dark is being removed.

        Reply
        • bloomer says

          January 29, 2016 at 11:54 am

          I did empty my cache and removed lines 3-18 in the .js. Added in the functions file.
          But when you scroll back up the large nav displays again. How can I get it to stay small even when you scroll up? Thank you so much for responding. 🙂

          Reply
          • Christoph Herr says

            January 29, 2016 at 12:03 pm

            The lines are still in global.js
            http://screencast.com/t/kGdk3C5oimY
            Maybe the upload of the changed file did not work.

          • bloomer says

            January 29, 2016 at 12:05 pm

            Ok, that was weird. Now it IS working. Seems like there was a delay. Thanks so much!! 🙂

          • Christoph Herr says

            January 29, 2016 at 12:07 pm

            You are welcome.
            Might have been a caching issue.

            Have a great day!
            Christoph

  2. Jason says

    February 28, 2016 at 6:31 am

    Perfect. Thanks for this. Very clutch.

    Reply
    • Christoph Herr says

      February 28, 2016 at 11:39 am

      Hi Jason,
      thanks for using the tutorial.
      I´m glad you found it useful.

      Reply
  3. anita says

    March 24, 2016 at 5:20 pm

    Perfect!! thanks for this tut
    it works like a charm!!

    anita

    Reply
    • Christoph Herr says

      March 25, 2016 at 1:28 am

      Hi Anita,

      thank you for using the tutorial and taking the time to write a comment.
      I appreciate it.

      Reply
      • anita says

        April 6, 2016 at 6:17 am

        christoph if I should like to let the header color changing on scrolling but not shrinking do you know how could I do it???
        Thanks a lot
        anita

        Reply
        • Christoph Herr says

          April 6, 2016 at 11:03 am

          Hi Anita,

          comment out or delete
          .site-header.dark .title-area {
          padding: 15px 0;
          }

          .header-image .dark .site-title > a {
          height: 56px;
          }

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

          from the style.css.

          You might have to adjust the media queries, too.

          Christoph

          Reply
  4. Roberto says

    July 3, 2016 at 7:08 am

    I have one question, whenever I look at the template in my phone, or at one of my pages or sections (e.g. …/blog) the top banner where my logo is turns black.

    I´ve changer it to look whit in the CSS using:

    .site-header.dark {
    background-color:#FFFFFF
    }

    But it seems when I scroll down the logo gets smaller and another bar replaces the white one with this black one.

    I can only edit the CSS, can you please help me figure how could I turn that background also into white?

    THANKS

    Reply
    • Christoph Herr says

      July 3, 2016 at 9:23 am

      Hi Roberto,

      It looks like you have to change the color in .front-page .site-header in the media query for 1023px around line 1823 of the style.css.

      Christoph

      Reply
      • Roberto says

        July 3, 2016 at 1:35 pm

        Amazing! Thank you so much!

        It ended up looking like this:

        .front-page .site-header {
        background-color: #FFFFFF;
        }

        And now, when the header minimizes, it has a white background.

        THX!

        Reply
      • Roberto says

        July 3, 2016 at 1:40 pm

        Damn I lost my menu!
        How do I change it to black?

        I tried this (out of logic I don´t know CSS or HTML

        .front-page .menu {
        font-color:#000000
        }

        But seems “font-color” is not the variable I am looking for right?

        It would be great to be able to see the variables (I am doing this through Rainmaker so I can´t just jump into the code (at least not that I am aware of)

        Thank you again

        Reply
        • Christoph Herr says

          July 3, 2016 at 1:48 pm

          Hi,
          The selector is .genesis-nav-menu a
          (If you only want to target the front page, .front-page .genesis-nav-menu a)

          The property is color.

          You can use the Developer/Inspect Tools of your browser on Rainmaker, too.

          Reply
          • Roberto says

            July 4, 2016 at 5:01 am

            Awesome and thank you!!

          • Roberto says

            July 5, 2016 at 6:15 am

            Hi Christoph,

            I did what you suggested “.genesis-nav-menu a” set to white. It worked but only for the Home page. I still get a black header in every page and blog posts (only when starting to browse but when I scroll and the header minimises, it turns to white – link to a blogpost: http://www.quieroaprendertarot.com/el-mago-version-sin-titulo/)

            Is there something I am missing here?

            Finally, on that same page (and on all blog posts and pages, podcasts, etc) I get this line of text telling me where I am: “You are here: Home / CÁPSULAS / El Mago: Versión Nueva Visión”

            Is there any way to get rid of that? Maybe even turning the text the color of the background could help.

            Thank you so much for your help, I am learning a lot here and your support here has been outstanding!

            Roberto

            p.s.
            I am doing this on the Rainmaker Platform if that´s worth mentioning for I am aware I can´t edit the code.

          • Christoph Herr says

            July 5, 2016 at 9:34 am

            Hi Roberto,

            you are welcome.

            I did what you suggested “.genesis-nav-menu a” set to white.

            Actually, that sets the text of the menu to black.
            I don’t see the menu in the markup anymore. Did you remove it?

            It worked but only for the Home page. I still get a black header in every page and blog posts

            You are only targeting the front page in your css.
            If you want to change it everywhere, add
            .site-header {
            background-color: #FFFFFF;
            }

            to the CSS.

            I get this line of text telling me where I am: “You are here: Home / CÁPSULAS / El Mago: Versión Nueva Visión”

            Is there any way to get rid of that?

            That is called breadcrumbs.
            In your Rainmaker dashboard, go to Design – Appearance – Breadcrumbs and deselect them.

          • Roberto says

            July 5, 2016 at 9:44 am

            Great it worked flawlessly!

            Thank you so much again!

            Roberto

Leave a Reply to anita Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Getresponse Email Marketing WordPress Speed Test

Subscribe to my newsletter

Please enter your information here:

I hate spam. Your information is save.

Latest Posts

WordPress Black Friday & Cyber Monday Deals

Once again it´s time for WordPress Black Friday & Cyber Monday Deals. Like last year, I have … [Read More...] about WordPress Black Friday & Cyber Monday Deals

Cafe Pro - sticky menu and image logo - end result

Add a logo to the sticky menu of Cafe Pro

A member of the Studiopress forum asked how to show a logo in the after header menu (primary … [Read More...] about Add a logo to the sticky menu of Cafe Pro

Smart Passive Income Pro screenshot

Remove the featured image from the homepage of Smart Passive Income Pro

Studiopress just released a new child theme for the Genesis Framework, called Smart Passive Income … [Read More...] about Remove the featured image from the homepage of Smart Passive Income Pro

Footer

StudioPress Theme of the Month

Copyright © 2021 · Magazine Pro Theme On Genesis Framework · WordPress · Log in