Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 5, 2020 at 6:30 pm #1250631
    mikeens

    Hello,

    I am currently trying to figure out if there is a way to customize the transparent header on different pages using CSS.

    On the home page of my website, the logo and main menu are black on the transparent header. But on the about page of my website I want to modify the transparent header to be yellow (#fcb514). I also want to add an alternate logo png to that page as well, so that the logo is yellow instead of black.

    Is this possible?

    Thanks

    • This topic was modified 4 years, 2 months ago by mikeens.
    October 10, 2020 at 11:42 pm #1251953
    Mike

    Hey mikeens,
    Sorry for the late reply and thanks for the login. To change the transparent header on your “about” page to #fcb514, try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-84 #header {
	    background: #fcb514 !important;
}

    if you want the yellow to be slightly transparent try this css:

    #top.page-id-84 #header {
	    background: rgba(252, 181, 20, .8) !important;
}

    To change the logo for this one page try adding this code to the end of your functions.php file in Appearance > Editor and adjust the url to your image to suit

    function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $("#top.page-id-84 .logo img").attr("src","https://your-site.ca/wp-content/uploads/2020/09/Projects-Logo-One-Colour-Amber.png");
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.