Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1487698

    Hi – I was needing to create two separate transparent headers as the color of my background photo varies.

    Can you please advise on how I can create a version that has a white logo and white menu text. I’ve included a link to the two pages I am referencing.

    Thank you,
    Anna

    #1487729

    One problem that could arise is if you have different logotypes. For example, the standard logo and alternative logo are SVG files, but the one on this page should be a PNG instead. As long as you stick to one type, there shouldn’t be a problem.

    the color of the menu you can redeclared like this :
    ( because i do not see private content area – here with example page-id’s)

    #top.page-id-44112 #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
      color: red;
    }
    #top.page-id-44112 #header.header_color.av_header_transparency .av-main-nav > li > a:hover .avia-menu-text {
      color: yellow;
    }

    you can replace the alternate logo (that for transparency) : you need to know the ID – if you replace a svg with a png file you had to know the url too of that replacement logo.
    put this to your child-theme functions.php (replace the page-id and the other parameters)

    function av_change_transparency_settings($header){
      if( is_page('44112') ){
    	// add class to the #header for using alternate logo (It's important to leave a space at the beginning within the quotation marks.)
        $header['header_class'] .= ' av_alternate_logo_active';  
    	// url of the replacement logo
        $header['header_replacement_logo'] = "/wp-content/uploads/globe-color.png";
    	// the id of the replacement logo - check on media library list view
        $header['header_replacement_logo_id'] = 49022; 
      }
      return $header; 
    }
    add_filter('avf_header_setting_filter','av_change_transparency_settings');

    setting that extra class av_alternate_logo_active is not needed if you have a standard transparency logo set on enfold options.
    maybe: you had to set some extra css for png logo on width and height on responsive case

    see example page here: https://webers-testseite.de/bg-video/

    PS: you see on my other pages (f.e. the landing page/home) of that example installation – that i do not use the transparent logo. Because i use svg files – i can fill the letters differently for transparent header. That is the reason why i had to add that extra class on that example page.

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