Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 20, 2017 at 11:06 pm #890940
    bakbek

    Hi, how can I hide the header on mobile? I picked that option that the header will be invisible and appear once the user scrolls down but on mobile it shows on the page load.

    How can I make it hidden and appear after scroll the same way it works on desktop?

    December 21, 2017 at 4:51 am #890984
    John Torvik

    Hey DROR,

    This option will hide the header on desktop screens, this option is not available to mobile.

    Best regards,
    John Torvik

    December 21, 2017 at 11:43 am #891094
    bakbek

    Yes, I understand that, but i’m asking how I can hide the header on mobile? Can it be done via CSS?

    December 21, 2017 at 4:19 pm #891179
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 768px) {
#header.av_header_scrolldown {
    position: fixed!important;
    top: 0;
    width: 100%;
    background: transparent!important;
}
#header.av_header_scrolldown.av_header_transparency {
    opacity: 0!important;
}}

    Best regards,
    Yigit

    October 26, 2022 at 5:57 am #1370245
    shyamb108

    Hi, I’m running into the same problem as the original poster above however the code above is not working for me. I notice it was posted in 2017 – does it need an update?

    I’m also running the following snippet of CSS to remove the burger icon – I assume this would be redundant if the header were removed?

    @media only screen and (max-width: 767px) {
    .av-main-nav-wrap {
    display:none !important;
    }
    }

    Thanks!

    • This reply was modified 2 years ago by shyamb108.
    October 26, 2022 at 3:35 pm #1370316
    Rikard

    Hi shyamb108,

    Could you post a link to your site, so that we can have a closer look please?

    Best regards,
    Rikard

    October 27, 2022 at 12:04 am #1370390
    shyamb108

    Hi Rikard,

    I’m developing it locally, so not sure of the best way to do that sorry. It’s the parallax theme if that helps?

    Thanks

    October 27, 2022 at 4:55 pm #1370475
    Rikard

    Hi shyamb108,

    Please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
#header {
  display: none; 
}
}

    Best regards,
    Rikard

    October 27, 2022 at 10:15 pm #1370498
    shyamb108

    Perfect – that did it for me!

    Thank you :)

    October 28, 2022 at 4:03 pm #1370575
    Rikard

    Hi shyamb108,

    Great, I’m glad that we could help :-)

    Best regards,
    Rikard

    November 21, 2022 at 12:31 pm #1373345
    DSRE-agency

    Hello,
    the code is working. But what needs to be added if the code should only work for a specific page id?

    November 21, 2022 at 1:19 pm #1373361
    Guenni007

    i do not think that this will be a good solution at all. Because Hamburger is part of #header – or do you have a one-pager with no navigation?

    Guess that Yigits posting is still working: Link

    Or if you like to have a similar behavior – this instead:

    @media only screen and (max-width: 768px) {
  #header.av_header_scrolldown {
    position: fixed !important;
    top: 0;
    width: 100%;
    transition: all 1s ease;
  }

  #header.av_header_scrolldown.av_header_transparency {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    transition: all 1s ease;
  }
}
    November 21, 2022 at 1:48 pm #1373367
    Yigit

    Hi @dsre-agency,

    Please use the code as following to target a specific page and change page ID (734 in example below) with your page’s ID

    
@media only screen and (max-width: 768px) {
.page-id-734 #header.av_header_scrolldown {
    position: fixed!important;
    top: 0;
    width: 100%;
    background: transparent!important;
}
.page-id-734 #header.av_header_scrolldown.av_header_transparency {
    opacity: 0!important;
}}

    Best regards,
    Yigit

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