Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • June 27, 2014 at 8:22 pm #284717
    Thinkgate

    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 #284742
    Josue

    Hi!

    Try with this:

    .page-id-xxx #header {
    position: static !important;
}

    Cheers!
    Josue

    June 30, 2014 at 4:02 pm #285244
    Thinkgate

    Josue,

    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 #285398
    Josue

    Try changing it to:

    .page-id-xxx #header {
    position: absolute !important;
}
    June 30, 2014 at 9:36 pm #285402
    Thinkgate

    So 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 #285413
    Josue

    Add 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,
    Josue

    July 2, 2014 at 5:08 pm #286270
    Thinkgate
    This reply has been marked as private.
    July 2, 2014 at 10:23 pm #286419
    Josue

    Hi 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,
    Josue

    July 2, 2014 at 10:30 pm #286421
    Thinkgate

    Added 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 #286424
    Josue

    You are welcome Cameron, always glad to help :)

    Regards,
    Josue

    June 22, 2017 at 3:05 pm #811578
    Blue_Bear

    Hi 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 :
    screenshot of the page witou scrolling

    but when you scroll down the header disapear but not the space :
    screenshot of the page when you scroll down

    Thanks a lot,
    Clement

    June 26, 2017 at 9:32 am #812926
    Victoria

    Hi 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,
    Victoria

    June 26, 2017 at 11:58 am #813001
    Blue_Bear

    Hi 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 #813067
    Victoria

    Hi 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,
    Victoria

    June 26, 2017 at 2:23 pm #813071
    Blue_Bear

    Hi 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,
    Clement

    June 26, 2017 at 4:10 pm #813124
    Victoria

    Hi Clement,

    So you will take it from here? Or you still need our help?

    Best regards,
    Victoria

    June 26, 2017 at 4:14 pm #813125
    Blue_Bear

    I 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 #813432
    Victoria

    Hi Blue_Bear,

    You need to uncheck the sticky header in the theme options and see if that will work for you.

    Best regards,
    Victoria

    June 27, 2017 at 2:37 pm #813438
    Blue_Bear

    It’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, 4 months ago by Blue_Bear.
    June 28, 2017 at 3:55 pm #813911
    Victoria

    Hi Blue_Bear,

    Can you give me the links to those 2 pages where the header needs not to be sticky?

    Best regards,
    Victoria

    June 28, 2017 at 4:06 pm #813919
    Blue_Bear

    Yes of course i put them in private section.

    July 2, 2017 at 7:42 pm #815595
    Basilis

    Hi,

    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 properly

    Best regards,
    Basilis

    July 2, 2017 at 11:17 pm #815649
    Blue_Bear

    I 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,
    Clement

    July 3, 2017 at 6:42 am #815743
    Rikard

    Hi Clement,

    Great, glad you found a solution and thanks for sharing it :-)

    Best regards,
    Rikard

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