Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • March 11, 2018 at 8:38 pm #925255
    kirillko

    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

    March 13, 2018 at 6:54 am #925886
    Rikard

    Hey kirillko,

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

    Best regards,
    Rikard

    March 13, 2018 at 8:31 am #925924
    kirillko

    Hi,

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

    Thanks!
    Kirill

    • This reply was modified 6 years, 8 months ago by kirillko.
    March 15, 2018 at 6:06 am #927055
    Ismael

    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

    March 15, 2018 at 10:47 am #927191
    kirillko

    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

    March 15, 2018 at 12:55 pm #927261
    Vinay

    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

    March 18, 2018 at 7:30 pm #928764
    kirillko

    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

    March 20, 2018 at 7:27 am #929553
    Ismael

    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

    April 7, 2018 at 9:20 pm #938671
    kirillko

    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

    April 8, 2018 at 4:50 pm #938828
    Ismael

    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

    April 23, 2018 at 9:57 pm #945574
    kirillko

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

    April 25, 2018 at 5:34 am #946383
    Ismael

    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

    April 30, 2018 at 12:24 pm #949030
    kirillko

    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

    May 2, 2018 at 10:50 am #949943
    Ismael

    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

    May 5, 2018 at 11:11 pm #952183
    kirillko

    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

    May 7, 2018 at 12:04 pm #952631
    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: 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

    May 8, 2018 at 10:21 am #953279
    kirillko

    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

    May 8, 2018 at 1:15 pm #953360
    Yigit

    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

    May 8, 2018 at 2:16 pm #953385
    kirillko

    Hi Yigit

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

    Thank you very much again!
    Kirill

    May 8, 2018 at 4:07 pm #953426
    Yigit

    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

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