Change Menu Icon Colour of Specific Page

  • Hi there,

    Hope this is the right forum. Need some guidance with CSS, I would like to be able to change the colour of the menu icon according to my specific portfolio pages.

    In the link I gave it is black and changes to white when scrolling, this is what’s it like on the whole site.

    However, I would like to change it according to the page colour theme, on this one for example like the teal colour matching the title colour then white on scroll. Hopefully you understand what I mean! Like this page would like the menu to be brown then change to white on scroll: [ redundant link removed ]

    Is this possible?

    Thanks in advance

    • This topic was modified 4 years, 2 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • https://gist.github.com/mckernanin/65db8b91312658361985

    you can use that function to add a class to your body tag. In your example that will add “gaming-logos” as a class. Then you can target it in your CSS like:

    .gaming-logos .transparent-header .rifl-toggle .toggle-separator, 
.gaming-logos .rifl-toggle .toggle-separator
.gaming-logos .transparent-header .rifl-toggle .toggle-separator:before, 
.gaming-logos .rifl-toggle .toggle-separator:before,
.gaming-logos .transparent-header .rifl-toggle .toggle-separator:after, 
.gaming-logos .rifl-toggle .toggle-separator:after { background: #71c7d4; }

.gaming-logos .transparent-header .is-sticky .rifl-toggle .toggle-separator, 
.gaming-logos .rifl-toggle .toggle-separator
.gaming-logos .transparent-header .is-sticky .rifl-toggle .toggle-separator:before, 
.gaming-logos .rifl-toggle .toggle-separator:before,
.gaming-logos .transparent-header .is-sticky .rifl-toggle .toggle-separator:after, 
.gaming-logos .rifl-toggle .toggle-separator:after { background: #fff; }

    you’ll have to rewrite the .is-sticky rules because of the CSS so it might get messy if you have a lot of pages you want to do this on.

    Thread Starter caitnihaonghusa

    (@caitnihaonghusa)

    Thank you @tugbucket for your response!

    Just wondering, where exactly do I put that function code? Does the code you provided there go in the CSS editor then or with the function code?

    Sorry quite new to this!

    Thanks again

    @caitnihaonghusa
    the PHP will go in your theme’s functions.php file.

    The CSS can be added to your themes style.css or into an editor (I assume).

    Thread Starter caitnihaonghusa

    (@caitnihaonghusa)

    Thanks again, just something else. for the function.php code, did you mean I change the text to suit the page?

    <?php
    //Page Slug Body Class

    function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . ‘-‘ . $post->post_name;
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘add_slug_body_class’ );
    ?>

    Like add slug body class, do I change part of that code to suit me?

    @caitnihaonghusa nah, you can just add that and it’s a filter meaning it takes the body_class hook and appends the new class to the function. It’s generic.

    But I took another look and I didn’t notice it the first time, your theme is already adding “portfolio-gaming-logos” class to the body. So you should be able to just replace the .gaming-logos in the above CSS to .portfolio-gaming-logos and it should accomplish the same thing. No need for the function.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Menu Icon Colour of Specific Page’ is closed to new replies.