Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #925255

    Hello Enfold,

    Thanks again for the theme! Rated it 5 stars long time ago.

    Having some mobile header issues. Happens only on mobile, can be replicated in web browser dev console if opened and page refreshed.

    1. When scrolling down it turns transparent just for a second / millisecond.
    2. Web settings do not apply on mobile header (transparency, appear only when scrolling and etc.)
    3. On mobile screen the mobile header covers the “head” “top” of the color section background which looks ugly.

    Screenshots:
    https://www.dropbox.com/s/acilpxl6n17wuzb/Screenshot%202018-03-11%2020.32.23.png?dl=0
    https://www.dropbox.com/s/btqezylj7nq1z1o/Screenshot%202018-03-11%2020.34.53.png?dl=0

    Updated WordPress and Enfold to latest version.

    Best regards,
    Kirill

    #925886

    Hey kirillko,

    Thanks for the login details, though they are not working. Could you check and verify please?

    Best regards,
    Rikard

    #925924

    Hi,

    Yep, provided wrong website – sorry, but right password :)

    Thanks!
    Kirill

    • This reply was modified 6 years, 7 months ago by kirillko.
    #927055

    Hi,

    Fixed headers are supposed to be disabled on mobile devices by default. Did you add any custom modifications for the header?

    Best regards,
    Ismael

    #927191

    Hi,

    Indeed, sorry, I had a custom css code – now removed it.

    However, still, mobile header behaviour is different from web.

    Is this still being developed by enfold? For example transparent header, header invisible and appears scroll and etc on mobile?
    https://www.dropbox.com/s/ufwe2wfmv1vd5jz/Screenshot%202018-03-15%2010.46.38.png?dl=0

    Thanks!
    Kirill

    #927261

    Hi,

    On the mobile device, the default header you see is the on that sits on top of the content.

    If you like to change this to transparent header please add the below CSS to your site.

    /* Transparent header on mobile */
     @media only screen and (max-width: 767px) { 
    #top #wrap_all .av_header_transparency, 
    .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;
    }}

    And if you like to make the header sticky please add the below code

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
      .responsive #top #main {
      	/* Margin top value should be equal to header height*/
        margin-top: 0px;
      }
      .responsive #top #wrap_all #header {
        position: fixed;
      }
    }

    Best regards,
    Vinay

    #928764

    Hi,

    1. /* Transparent header on mobile */ – how to make mobile header to use the transparent logo? otherwise the header is transparent, but still shows the main logo.
    2. /* Sticky header on mobile */ – this works great thanks.
    3. Mobile header covers the top part of the color section image. How to position the color background image bellow the header?
    https://www.dropbox.com/s/dqajstds8xyyemq/Screenshot%202018-03-18%2019.29.29.png?dl=0
    https://www.dropbox.com/s/zzss5ozy9jpkwhg/Screenshot%202018-03-18%2019.30.21.png?dl=0

    Thanks!
    Kirill

    #929553

    Hi,

    1.) The transparent logo is being used when the header is transparent. Please provide a screenshot of the issue.

    3.) Please try this css code.

    @media only screen and (max-width: 767px) {
        .html_header_top.html_header_sticky .av_header_transparency + #main {
            padding-top: 82px;
        }
    }

    Best regards,
    Ismael

    #938671

    Hi Ismael,

    Sorry for late response.

    3) Code doesn’t work.
    Expected outcome: https://www.dropbox.com/s/9ii1cfwjpl5tjhp/Screenshot%202018-04-07%2022.19.14.png?dl=0
    Current result: https://www.dropbox.com/s/61k02x6ry5m3w4o/Screenshot%202018-04-07%2022.19.54.png?dl=0

    I do like the body and breast of this woman, though would like the mobile view focus on her face :D Same goes with other images in other pages.

    Thanks!
    Kirill

    #938828

    Hi,

    Thank you for the update. We would like to check this again but the login credentials above are no longer working. Please check it.

    Best regards,
    Ismael

    #945574

    Hi,
    Please find credentials in the private content field.
    Thanks.
    Kirill

    #946383

    Hi,

    Thank you for the update.

    We’ve added this code on the Quick CSS field.

    .avia_mobile #top .av-parallax {
        height: 100% !important;
    }

    Please remove browser cache prior to checking the page.

    Best regards,
    Ismael

    #949030

    Hello,

    Thanks! Almost there – one thing slipped out of my mind.

    1. /* Transparent header on mobile */ – how to make mobile header to use the transparent logo? otherwise the header is transparent, but still shows the main logo. Currently it’s like that https://screencast.com/t/caQWKqsfq

    /* Transparent header on mobile – THIS CODE YOU PREVIOUSLY PROVIDED ME */
    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency,
    .av_header_transparency #advanced_menu_toggle {
    background: transparent!important;
    position: absolute!important;
    }}

    Thanks!
    Kirill

    #949943

    Hi,

    The transparent logo is inside the “subtext” container, just below the actual logo image. Try to hide the actual logo and make the one inside the “subtext” container display instead.

    Best regards,
    Ismael

    #952183

    Hello,

    Thanks for the tip, sadly I tried playing around but was not able to achieve that :(

    Could I please ask you to provide me the css code for that? I think this will be my very very very last question and the website will be ready :)

    Thanks!
    Kirill

    #952631

    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: 767px) {
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
        opacity: 0;
    }
    .responsive #top .av_header_transparency .logo img.alternate {
        display: block;
    }}
    

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    #953279

    Hi Yigit,
    Thank you very much, always super happy to get help from you! Seems that I am testing drastically the latest Enfold burger menu functionality and that’s why we are having so much chat here about bugs… Sorry for tons of questions.

    Your code works perfectly well for the logo, however the burger icon is still black, not fetching the mobile transparent color. We checked with my developer and it’s a bit complicated to figure out from the console.
    https://screencast.com/t/t7jvTyF0

    Could you please advise how to fix this bug as well, so the burger menu icon .av-hamburger will be also white?
    Kirill

    #953360

    Hi,

    I am very glad to hear that :)
    I added following code to bottom of Custom CSS field in Appearance tab

    .header_color.av_header_transparency .av-hamburger-inner, .header_color.av_header_transparency .av-hamburger-inner::before, .header_color.av_header_transparency .av-hamburger-inner::after {
        background: white;
    }

    Please review your website :)

    Best regards,
    Yigit

    #953385

    Hi Yigit

    Bravo! Thanks! Works! was trying to figure out, testing testing no results.

    Thank you very much again!
    Kirill

    #953426

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Multiple mobile header issues.’ is closed to new replies.