Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 9, 2018 at 2:06 am #924212
    MLA18

    Hello support,

    I opened a topic a few months ago here: https://kriesi.at/support/topic/sticky-header-on-mobile-5/

    The solution you provided worked great for that particular website at the time. I am now attempting the same effect (a sticky header on mobile), however the website I am working on now has different header settings, so the same code is not working correctly (the sticky header is covering up portions of the shopping cart once “view cart” is initialized on mobile. It is also covering the top portions of other pages.

    The code you provided previously was:

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

    By chance could you let me know which part of the CSS code needs to be altered?

    Any advice you can provide would be greatly appreciated.

    Thanks in advance!

    March 9, 2018 at 2:24 pm #924500
    Victoria

    Hey MLA18,

    Best regards,
    Victoria

    March 9, 2018 at 4:50 pm #924605
    MLA18

    Hi Victoria,

    I’m sorry, I didn’t give a better example for you to look at. Add a product to the shopping cart, then click on the shopping cart/bag icon. You will then notice the are above the coupon code area is hidden by the sticky header. This is the same on all pages…perhaps 20% of the top of each page is hidden behind the sticky header.

    March 11, 2018 at 9:44 pm #925276
    Basilis

    Hi,

    Actually that is happening because the search icon is getting pushed below.
    Do you mind if we make the icons, especially the cart one a bit smaller?

    Best regards,
    Basilis

    March 11, 2018 at 9:58 pm #925280
    MLA18

    Hi Basilis,

    I would be willing to give that a try. Although it was requested by my client that the shopping cart/bag icon be larger.

    Thanks!

    March 14, 2018 at 7:46 am #926453
    Ismael

    Hi,

    Thank you for the update. You need to adjust the top padding value of the main container. Right now it is set to “0”.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .html_header_top.html_header_topbar_active.html_header_sticky #top #main {
    padding-top: 119px !important;
  }
}

    Resave the theme options, remove browser cache and do a hard refresh before checking the page.

    Best regards,
    Ismael

    March 14, 2018 at 10:45 pm #926890
    MLA18

    Thank you very much for your help! That was definitely the missing piece of the puzzle.

    You may close this thread.

    March 15, 2018 at 5:10 am #927011
    Nikko

    Hi,

    Glad that Ismael helped you :) Thanks for using Enfold! Have a great day.

    Best regards,
    Nikko

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