Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 19, 2019 at 6:06 am #1128812
    marsh1984

    Hi there,
    I have added this CSS to make header sticky on mobile but doesn’t seem to do anything.
    Appreciate your feedback and advice on this.
    Thanks

    @media only screen and (max-width: 767px) {
    .html_header_top.html_header_sticky #top #wrap_all #header {
    position: fixed;
    }
    }

    August 20, 2019 at 3:01 am #1129069
    Ismael

    Hey marsh1984,

    Thank you for using Enfold.

    You have to toggle the Enfold > Performance > File Compression settings after adding the css modification. And don’t forget to purge the WP Rocket cache. We disabled the css compression temporarily.

    Best regards,
    Ismael

    August 20, 2019 at 4:39 am #1129091
    marsh1984

    Thanks that’s great.
    Only thing is page contents sits behind header on mobile and desktop narrow browser window.
    See here:
    https://ibb.co/xHD9kfN
    https://ibb.co/tqLqYBc

    August 20, 2019 at 8:13 pm #1129311
    Victoria

    Hi marsh1984,

    Please add this code too:

    
@media only screen and (max-width: 767px) {
  .responsive #top #main {
      padding-top: 110px !important;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 16, 2019 at 4:43 am #1138650
    marsh1984

    Thanks and how do I have the header sticky on Ipad view landscape and desktop?

    thanks

    September 16, 2019 at 11:45 am #1138775
    Ismael

    Hi,

    Thank you for the update.

    Look for this comment in the Quick CSS field.

    /*Header Sticky Mobile*/

    Adjust the max-width value of the following css media query from 767px to 1024px. Please don’t forget to toggle the Performance > File Compression settings after editing the code.

    Best regards,
    Ismael

    September 17, 2019 at 3:20 am #1138976
    marsh1984

    Thank you it works.
    Now I just need some help in adjusting the position of page contents as it now sits behind the header on Ipad view see screen shot https://ibb.co/nq2MHBJ

    September 18, 2019 at 1:31 pm #1139458
    Ismael

    Hi,

    You can include this code inside the css media query where we put the previous css modification to adjust the top padding of the main container.

    
.responsive #top #main {
    padding-top: 147px !important;
}

    Thank you for the update.

    Best regards,
    Ismael

    September 18, 2019 at 10:53 pm #1139737
    Guenni007

    do you think it is a good idea to have on general a semitransparent header with this option?
    if not:

    .header_color .header_bg {
  background-color: rgba(255,255,255,1);
}

    in addition to Ismaels Code
    for the Rest you had to adjust the main padding:
    (because you had defined the header height und 990px to 90px plus the header_meta height of 30px)
    (on screens smaller than 768px the header_main height is set to 80px)

    @media only screen and (min-width: 768px) and (max-width: 989px) {
	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
	    padding-top: 120px !important;
	}
}

@media only screen and (max-width: 768px) {
	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
	    padding-top: 110px !important;
	}
}
    September 22, 2019 at 11:09 pm #1140786
    pinxe

    Hi everyone!

    I would like to ask you if some of you are using anchor links in a onepage style and the sticky header on mobile. If yes, how it’s possible to solve the problem of the offset necessary to bring the user to the correct point on click, now, with the sticly header on mobile, I should add an offset for every link for every section. Make sense my question?

    Thanks

    September 23, 2019 at 4:27 pm #1141046
    Guenni007

    why not a new topic?
    Maybe this is interesting for others too – which do not enter this post because it doesn’t quite cover the subject here.

    September 25, 2019 at 3:03 am #1141652
    Ismael

    Hi,


    @pinxe    : You can adjust the header scroll offset using the “avf_header_setting_filter” filter. 

    add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] + 48;
	return $header;
}

    Please open a new thread or ticket as suggested above. We’ll close this one for now.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Sticky Header on Mobile’ is closed to new replies.