Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 20, 2017 at 7:21 pm #879309
    mbelkin

    Hello — what I’d like is on desktop to have the header invisible until the user scrolls down on the first page, but on smartphones I’d like it to always be visible and stick to the top. I found some code samples for sticky mobile header (which I know isn’t officially supported) but the problem is that when I start to scroll down on mobile it briefly flashes to become invisible and then returns. Is there a way around this? My guess is that a jquery scroll hook somewhere is still firing (going from 0-1 opacity when it’s already 1) but I don’t know where that code is or how I would fix this for mobile only. Thanks!

    November 21, 2017 at 10:34 am #879617
    Victoria

    Hey mbelkin,

    Did you get it working? Looks very nice on my end, no weird effects. Which browser and OS are you testing in?
    Checked on an iPhone, no flashing, the header is fixed.

    Best regards,
    Victoria

    • This reply was modified 7 years, 5 months ago by Victoria.
    November 21, 2017 at 6:18 pm #879859
    mbelkin

    Hi Victoria — unfortunately I didn’t get it working. I’m testing on Safari and Chrome on iOS (but desktop chrome in an iPhone 6 viewport does the same thing). If you scroll slowly from the top of the page you’ll see the header flash (visible -> transparent -> visible). Also the shadow on the header isn’t initially visible (it only appears after that flash) but that’s not a huge deal.

    November 22, 2017 at 3:20 pm #880316
    Victoria

    Hi mbelkin,

    Ok, I see what you mean.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

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

    If you need further assistance please let us know.

    Best regards,
    Victoria

    • This reply was modified 7 years, 5 months ago by Victoria.
    November 22, 2017 at 10:03 pm #880467
    mbelkin

    That worked!! Can you also tell me how to enable the header shadow by default? When I scroll down the class “av_header_transparency” is added which ads a nice drop shadow, but it isn’t there initially with this workaround.

    November 23, 2017 at 8:43 pm #880934
    Jordan Shannon

    Hi,

    Add this to quick css:

    
#header_main_alternate{
  box-shadow: 0 8px 6px -6px black;
}

    Best regards,
    Jordan Shannon

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