Christoph Herr

Solutions For Your Online Business

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

Last updated on by 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:

Share on PinterestShare on LinkedIn

Reader Interactions

Comments

      • 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

        • 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. 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

      • 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

      • 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

        • 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

          • 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.

          • 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.

Leave a Reply

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