
Tagged: Transparent Headers
-
AuthorPosts
-
August 7, 2025 at 4:54 pm #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,
AnnaAugust 8, 2025 at 6:58 am #1487729One 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 casesee 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.
-
AuthorPosts
- You must be logged in to reply to this topic.