Okay
  Public Ticket #2954775
Header Logo doesn't change on Light / Dark Background Images
Closed

Comments

  •  2
    Aldrich started the conversation

    Hi, on our landing page, we have assigned a page and are using the showcase template for that page, we have assigned the header image, light and dark, however when we scroll / flip through the folio pieces on the landing page the header logo, does not change from light to dark and visa versa when there is a light image set as the hero. 

    We have tried to set the portfolio options to white on any folio page that has a white hero image, but the header and menu do not change to black, this makes the site logo and menu disappear or blend in with the background image on the landing page. 

    Is there any setting or css code that needs to be applied to the header / folio item page or folio landing page that will fix this issue as it is crucial for interface operation.

    Thanks

    Aldo

  •  1,823
    Support replied

    Hello Aldo,

    if you can:

    - provide wp admin access in a private comment (admin login URL, admin username & password)

    - indicate the page where the logo does not change (page URL)

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Aldrich replied privately
  •   Aldrich replied privately
  •  1,823
    Support replied

    Hello Aldo,

    first of all to change the color of text over hero section you need to change its background type in portfolio item options:

    https://prnt.sc/26cppax

    If you select background color to Black the text & logo will show white/light and the other way around

    Second, in the portfolio content if you want to have a section/container which reverts the logo when scrolling over, you can also add the class change-header-color

    https://prnt.sc/26cpqid

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  2
    Aldrich replied

    Hi,


    sorry not working for me still . . . it only changes when you click the slide link, the problem is when the site loads to the home page, and a slider with a white background image doesnt switch the menu and header image to black, I still think that some code or css needs to be injected into the actual slider template page to explicitly tell the slider that when there is a slider image with a white or light colour background that it should switch to black - or explicitly target the slide ID number and tell the slider to switch the header to black when slide id768 / name  etc. is loaded

  •  1,823
    Support replied

    HI Aldo,

    ok, I see what you mean. We will try to address this as soon as possible.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  2
    Aldrich replied

    Hi Support,


    cool, if you can let me know asap as Im almost finished, if there are issues I can get our developer to look at it to speed things up, i have actually told him to look at into now, but they won't edit anything except show some possible solutions, it would beat if we could have a solution by tomorrow.


    Thanks


    A.

  •  1,823
    Support replied

    Hello Aldo,

    while waiting you can try the following in showcase:

    - read the background type property with

    $bauman_bknd_color = bauman_get_post_meta( BAUMAN_THEME_OPTIONS, get_the_ID(), 'bauman-opt-portfolio-bknd-color' );

    add the code before/after line 60

    - assign a class if the bknd color is different

    <div class="swiper-slide<?php if( $bauman_bknd_color == "dark-content" ) { echo " change-header"; } ?>"... rest of the code follows...

    - then you can add CSS for it, for example

    .light-content .change-header .title {

        color: #fff;
    }

    - then dynamically in /js/scripts.js you should change dynamically the color of the header and footer elements (for example adding a CSS class white-header and white-footer )

    if ($this.hasClass("change-header")) {
          setTimeout( function(){
              $('header').addClass('white-header');
          } , 10 );
    }

    in slider's transitions 

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy