Change style on sticky menu when scroll down

Bas Rennings

Hi, I have made my main header (logo + main navigation) sticky. 

beans_add_attribute('beans_header', 'data-uk-sticky', '{top:-150}');

I would like to change the style the moment the navigation is sticky. Fot example I want to change the background color and I would like to change the logo/logo size.

Any idea how to accomplish this with beans/uikit?

Thanks.

Thierry Muller

Hey Bas,

If you look at the header classes, a uk-active class is added as the header becomes sticky. You can use that class to change the background color.

Regarding the logo, you would eighter have two logos and show/hide using the same CSS class, or set the logo using a CSS background image and switch it also use the uk-active class.

Note that you can add animation to smoothen the transition, as you will find in the UIkit Sticky documentation, in the options list.

Have fun,

Bas Rennings

Thx Thierry, Will have a look. I had the same idea for the logo.

Bas

Sami Rods

Hi!

I have a question regarding this subject.

Is it posible by using 'uk-active' class, to tottaly make the logo disappear when scrolling? Or is there a better way to just make the menu sticky instead of the entire header? Which option would be better? In my case, I'd really prefer to have a thinner sticky menu, and not the entire header sticky, since my logo is centered... http://www.tupodes.pt/ter-um-site

Thanks again for all your help.

Sami Rods

Hi again,

I did it! Almost perfect...

Here is the code I inserted:

// sticky menu
beans_remove_markup( 'beans_site' );
beans_add_attribute( 'beans_primary_menu', 'data-uk-sticky', 'top:0' );

I'm working by analogy.

But I still have this bit I wanted to improve... This is my CSS:

.uk-active {
    tm-logo: hide;
    background-color: #ffffff;
    border-bottom: 1px solid #ededed;
}

Just wanted to improve this: when I scroll, the bottom borde does not go till the end of the page. It leaves some space without margin. I know it is due to the fact that the class 'beans primary menu' doens't go both end of the page.

What do you think is the best way to do? Increase the size of the 'beans primary menu' ?

Cheers Sami

Thierry Muller

Hey Sami,

Yes you have to use the CSS to hide it, your CSS isn't quite right though. To hide the logo, you CSS would be:

.uk-active .tm-site-branding {
  display: none;
}

This comes down to plain CSS skills (not Beans specific) and I would strongly advise to do more CSS tutorials which will help you achieving this kind of things 🙂

All the best,

Thierry Muller

Hey Sami,

In your case it is a little bit different because you made only the nav sticky and not the header. In you case you don't need to hide the logo since it is place above the navigation and disappear on scroll.

My code is according to Bas original code which makes the entire header sticky and not only the nav.

Have fun,

Sami Rods

Thanks!

It is ok now. Just did some attempts in order to set the best top distance and it looks nice now.

Cheers Sami

Mike Hopkins

Hey Guys,

I've tried someting similar for a site i'm developing and accomplished the adding a class to the sticky header with javascript when as it scrolls/animates on:

!(function( $ ) {

  $( window ).bind( "scroll", function() {
      if ( $( this ).scrollTop() > 150) {
         $("yourMenuClass").addClass('addNewClass');
     } else {
          $("yourMenuClass").removeClass('addNewClass');
      }
 } );

} )( window.jQuery );

As for the logo change you can possibly replace the logo in a similar way but have not tried it...however registering another logo in the cutomiser as follows:

add_action( 'customize_register', 'theme_wp_customize_options' );

function theme_wp_customize_options() {

    // Secondary Logo
    $fields = array(
        array(
            'id' => 'theme_logo_image_secondary',
            'label' => 'Logo Image 2',
            'type' => 'WP_Customize_Image_Control',
            'transport' => 'refresh'
        )
    );

    beans_register_wp_customize_options( $fields, 'title_tagline' );

}

and then using the javascript above to replace the logo would be great. If anyone can achieve that and share, that would be awesome! 🙂

Cheers,

Thierry Muller

Hey Mike,

If I may ask, why adding a class to the navigation and not using the uk-active class which is automatically added when sticky is active?

Regarding your logo, you can totally add a second logo in the customizer and use CSS uk-active class to show/hide which ever logo needs to be displayed. You can indeed to that via JS too but the one thing you don't want to do is remove elements as they need to be both present at all time to be toggled based on the scroll position.

Let me know if that doesn't make sense.

Cheers,

Mike Hopkins

Hey Thierry,

I didn't think of using the active class and in hindsight its the better/only way to go. 🙂

Cheers,

Alex Vidal

hello,

Has anyone found a solution to switch logo after user scroll, i understand how to use uk-active in css however i dont know how to add another logo to the outputed html.

thank you

Thierry Muller

Hi Alex,

Do you need to have the ability to upload/set the secondary logo via the customizer or harded coded in your child theme?

Thanks,

Alex Vidal

Hi Thierry,

Yes that would be ideal, i tried the code above but couldnt get it to work.

ideally i would like to upload the secondary logo via the custommizer and then it would appear in the page html below the primary logo. From there i can use uk-active to hide/show via css.

Thank you for your help.

Thierry Muller

Hi Alex,

Below is a complete snippet to achieve what you are after:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
 * Enqueue UIkit assets.
 */
function example_enqueue_uikit_assets() {
 beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
}

add_action( 'wp_enqueue_scripts', 'example_inline_style' );
/**
 * Enqueue inline style.
 */
function example_inline_style() {
  $header_image = get_theme_mod( 'example_secondary_logo', false );

 // Stop here if the image isn't set.
 if ( false === $header_image ) {
    return;
 }

 $style = '
   .example-secondary-logo {
     display: none;
    }
   .uk-active .tm-logo {
     display: none;
    }
   .uk-active .example-secondary-logo {
      display: block;
   }
 ';

 wp_add_inline_style( 'uikit', trim( preg_replace( '/\s\s+/', ' ', $style ) ) );
}

add_action( 'customize_register', 'example_customizer_fields' );
/**
 * Register customizer fields.
 */
function example_customizer_fields() {

  $fields = array(
     array(
     'id'      => 'example_secondary_logo',
      'label'   => __( 'Secondary Logo', 'example-domain' ),
      'type'    => 'WP_Customize_Image_Control',
    ),
  );

  beans_register_wp_customize_options( $fields, 'title_tagline' );

}

add_action( 'beans_site_title_link_append_markup', 'example_secondary_logo' );
/**
 * Add secondary logo.
 */
function example_secondary_logo() {
  $header_image = get_theme_mod( 'example_secondary_logo', false );

 // Stop here if the image isn't set.
 if ( false === $header_image ) {
    return;
 }

 ?>
  <img class="example-secondary-logo" src="<?php echo esc_url( $header_image ); ?>" alt="<?php echo esc_html( get_bloginfo( 'name' ) ); ?>">
  <?php

}

// Set the header as sticky.
beans_add_attribute( 'beans_header', 'data-uk-sticky', '{top: 0}' );
beans_add_attribute( 'beans_header', 'style', 'background-color: #fff;' ); // Should be moved to CSS stylesheet instead.

With the snippet above, you will see a new customizer option under Customizer->Site Identity->Secondary Logo. Once set, it will switch the main logo with the Secondary logo when the sticky header is active 🙂

Happy coding,

Alex Vidal

Cheers,

Works great.

Thank you.

Write a reply

Login or register to write a reply, it's free!