-
AuthorPosts
-
June 27, 2014 at 8:22 pm #284717
Hey!
I’m trying to disable the sticky/fixed & shrinking header (which I have applied via child theme options) for a single page. I know I can apply it via CSS, just not sure which class(es) to target.
I’m assume it starts something like
#top .page-id-xxxx #header_main ....
but cannot get it to work.The header on the page I am trying to target is transparent as well (if that makes a difference).
Thanks!
– Cameron
June 27, 2014 at 11:19 pm #284742Hi!
Try with this:
.page-id-xxx #header { position: static !important; }
Cheers!
JosueJune 30, 2014 at 4:02 pm #285244Josue,
Thanks for getting back to me.
While this keeps the header in position, it kills the transparency effect (header background turns white) and the logo shrinks (as it would normally).
As I start to scroll the first section (which lays under the navigation in header transparency mode) turns slowly white (some sort of animation set).
How it looks without your code applied: http://s18.postimg.org/bxj7j74p5/Assessment_Product_Pricing_Thinkgate_2.jpg
Top of page with your code applied: http://s23.postimg.org/3pxwgeakr/Assessment_Product_Pricing_Thinkgate_3.jpg
June 30, 2014 at 9:33 pm #285398Try changing it to:
.page-id-xxx #header { position: absolute !important; }
June 30, 2014 at 9:36 pm #285402So that kept the navigation at the top (not sticky) but still shrunk the logo and adjusted the menu items. How can I get those to be completely stationary?
Thanks,
Cameron
June 30, 2014 at 9:58 pm #285413Add this too:
.page-id-xxx #header .logo img, .page-id-xxx #header_main .container, .page-id-xxx .main_menu > ul:first-child > li > a{ height: 88px !important; line-height: 88px !important; max-height: 88px !important; }
Regards,
JosueJuly 2, 2014 at 5:08 pm #286270This reply has been marked as private.July 2, 2014 at 10:23 pm #286419Hi Cameron,
Discard my previous suggestions, try adding this at the very end of your theme functions.php file instead:
function add_custom_script(){ if(is_page(9516)){ ?> <script> jQuery(window).load(function(){ jQuery('html').removeClass('html_header_sticky'); }); </script> <?php } } add_action('wp_footer', 'add_custom_script');
Regards,
JosueJuly 2, 2014 at 10:30 pm #286421Added to my child theme’s functions.php file and it worked!
Thanks for all of your help, Josue!
– Cameron
July 2, 2014 at 10:40 pm #286424You are welcome Cameron, always glad to help :)
Regards,
JosueJune 22, 2017 at 3:05 pm #811578Hi Josue,
This function works great thanks ! Unfortunetly I wanted to hide the sticky header to let some space to my secondary fullwidth menu but there is a transparent space above and I don’t know how to remove it ?
When you arrive on the page it’s normal :
but when you scroll down the header disapear but not the space :
Thanks a lot,
ClementJune 26, 2017 at 9:32 am #812926Hi Clement,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaJune 26, 2017 at 11:58 am #813001Hi Victoria,
Yes of course, I give you an acces in the private content section.
Thanks a lot.
Clement
June 26, 2017 at 2:20 pm #813067Hi Clement,
How are you hiding the sticky header, it’s still checked in your theme options, unckeck it there and see if that helps. The submenu thinks the header is still there.
Best regards,
VictoriaJune 26, 2017 at 2:23 pm #813071Hi Victoria,
As I want to disable sticky header to specific pages I use the function gived by Josue above :
function add_custom_script(){ if(is_page(XXXX)){ ?> <script> jQuery(window).load(function(){ jQuery('html').removeClass('html_header_sticky'); }); </script> <?php } } add_action('wp_footer', 'add_custom_script');
And the fact that the sticky header is disable but the submenu think it’s still here is exactly my problem :)
Thanks,
ClementJune 26, 2017 at 4:10 pm #813124Hi Clement,
So you will take it from here? Or you still need our help?
Best regards,
VictoriaJune 26, 2017 at 4:14 pm #813125I need your help to fix the fact that the submenu believe the sticky header is still in place. I want it to realize that the sticky header is not there anymore.
June 27, 2017 at 2:32 pm #813432Hi Blue_Bear,
You need to uncheck the sticky header in the theme options and see if that will work for you.
Best regards,
VictoriaJune 27, 2017 at 2:37 pm #813438It’s not the solution cause when I do that the sticky header is disable on all my website and I want to do that just for 2 pages.
- This reply was modified 7 years, 5 months ago by Blue_Bear.
June 28, 2017 at 3:55 pm #813911Hi Blue_Bear,
Can you give me the links to those 2 pages where the header needs not to be sticky?
Best regards,
VictoriaJune 28, 2017 at 4:06 pm #813919Yes of course i put them in private section.
July 2, 2017 at 7:42 pm #815595Hi,
The problem is that you might remove / hide it, but it is not actually been disabled.
It is just been removed as an element, but the rest of the options are still there with any CSS classes.
What you need to do is not as simple, I would suggest to consider hire a freelancer developer to help you with the issue properlyBest regards,
BasilisJuly 2, 2017 at 11:17 pm #815649I find a solution !!! *Yeah* It’s not perfect but do the job.
I remove the function and I just add this CSS :
.page-id-XX .header-scrolled { display:none!important; }
So no need to hire a freelancer :)
Anyway, thanks Victoria and Basilis for your help.
Best regards,
ClementJuly 3, 2017 at 6:42 am #815743 -
AuthorPosts
- You must be logged in to reply to this topic.