-
Posts
-
Hey guys.
I know how to set up transparent and sticky header for pages, but on single posts I’m lost. I have created child theme where is my custom single.php file. Now I want to filter the get_header(); function to modify the header. I have tried the filter from this thread but it is not working. Could you please help me how to make header transparent and sticky on single posts?
Thank you
Hey Anilix,
Please provide a link to the site/page in question. Header transparency should be universal across the site.
Best regards,
Jordan ShannonThis link is what I set up in theme options and it is how it should be on all pages of the website.
This link is on a single page where I want the same header effect.
I have used this filter:add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1); function avf_header_setting_filter_mod($header_settings) { if ( is_singular('diskuter') ) { $header_settings['header_sticky'] = 'header_sticky'; $header_settings['header_transparency'] .= " header_transparency"; } return $header_settings; }I can see it added some classes into html tag. But I need to make the header transparent. The above filter make it only sticky and the menu text is now not visible.
When I inspect the html and comparing the site with good header and site with bad header, i can see that I’m missing some classes in the header, especialy on scroll. Is there some way to make the header the same on all pages?
Thank you.
Hi,
I have taken a look at your page, and understand that you wish to have the transparent header for the single post that changes when you scroll down. I also see that you created a single.php, but the problem is that your page doesn’t add the class “av_header_transparency” before the page is scrolled or “header-scrolled” after it is scrolled, so it doesn’t allow the css to change based on the position of the page.
So while this css will make your header transparent:.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a { background-color: rgba(0, 0, 0, 0.5) !important; }it won’t change after scroll.
As an alternative, I would suggest not using your “single.php” and instead on your single post set the “Header visibility and transparency” in the “Layout” sidebar of the builder. This will ad the correct classes so it will change on scroll.
I downloaded your image and created a transparent header on a single post on my localhost to demonstrate:
I believe this is what you are trying for, correct?Best regards,
MikeThank you for your reply but there is a problem. It is a custom post type and I cant see this option in the sidebar of my backend layout.
Also, I need to change the color of the logo. I guess I will need to put the classes in the header with javascript.
I thought, there is a better way to do this via php. And I still do. If it is working on page.php I don’t see a reason why it shouldn’t work on single post.
I don’t want the client to check the transparency setting each time when he is creating a new single post.
Isn’t possible to set it up via these filters?
avf_header_setting_filter
avf_header_classesI already make the header sticky thanks to avf_header_setting_filter. But I dont know which classes to add and remove to make it transparent and change the logo version on scroll as I have it on another pages.
Thank you.
Hi,
Oh I see, I didn’t catch that you were working with custom post types.
I tested your function above on my localhost, but it didn’t work for me even though I changed is_singular(‘diskuter’)
to is_single(‘3401’) but it clearly is working for you.
So I tried researching this further and found this post in our documentation that sets the transparent header as a default header style for all pages and posts. Perhaps seeing this function will offer some clues for your issue: Please see this function
Looking at enfold-functions.php on line 814 I see this line that maybe the function you need to add to yours:$header['header_transparency'] .= ' header_scrolldown';For changing the logo on scroll, please look at line 110: \enfold\includes\helper-main-menu.php
$headerS['header_replacement_logo']I also found that the classes that are added and removed in the header for transparency, sticky, & header size on scroll are done so with this script: \enfold\js\avia-snippet-sticky-header.js
*side note – This is a post on setting the header position
Best regards,
MikeThanks for your support but I have managed to do this way more easily. I will post the solution here, maybe it will help someone. I have used your great filter hook
avf_header_setting_filter.First I run this filter through the page where the header is working like I want. Trough the php function
print_r, I have print the whole array with the header settings. Than I compare this array with the array on custom post type and missing parts added to the filter. In my case the filter looks like this.add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1); function avf_header_setting_filter_mod($header_settings) { if ( is_singular('diskuter') ) { $header_settings['header_transparency'] .= " header_transparency"; $header_settings['header_class'] .= " av_header_top av_logo_left av_main_nav_header av_menu_right av_custom av_header_sticky av_header_shrinking av_header_stretch_disabled av_mobile_menu_phone av_header_transparency av_header_searchicon av_header_unstick_top_disabled av_minimal_header av_bottom_nav_disabled av_alternate_logo_active av_header_border_disabled"; } return $header_settings; }
- You must be logged in to reply to this topic.