Home › Forums › WoodMart support forum › Sticky header on desktop and mobile

Sticky header on desktop and mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 28, 2021 at 6:49 pm #262195

    kyllaz
    Participant

    Hi there.
    I want to have my sticky row on desktop beeing “main header” row and on mobile the “header bottom” row, how can i achieve that? I change the desktop and mobile views but the options are not affected by that.

    Look forward for a reply

    Best regards

    January 28, 2021 at 8:55 pm #262216

    Elise Noromit
    Member

    Hello,

    Make all the rows sticky, disable header clone and hide the row you do not want to show on the desktop, and hide the row you do not want to show on mobile.

    If you have any questions please feel free to contact us.

    Best Regards

    January 28, 2021 at 9:39 pm #262241

    kyllaz
    Participant

    Hi there.
    Many thanks for your reply. For the desktop version your solution works ok, because the sticky starts with the main header row and by hiding the header bottom row when sticky it’s ok, but now on mobile version when i hide the main header and the sticky starts it gives like a small jump because its changing the display mode to none for that row and that is not good as it looks like a bug, it’s not fluid.
    Is there any way you can help me to sort this out?

    Many thanks

    January 28, 2021 at 9:43 pm #262245

    kyllaz
    Participant

    This is the css i’ve applied


    @media     screen and (max-width: 1024px) {
    header.whb-header.whb-sticked .whb-header-bottom{
    display: block !important;
    }

    header.whb-header.whb-sticked .whb-general-header{
    display: none !important;
    }
    }

    header.whb-header.whb-sticked .whb-header-bottom{
    display: none;
    }

    header.whb-header.whb-sticked .whb-general-header{
    display: block;
    }

    January 29, 2021 at 11:21 am #262369

    Elise Noromit
    Member

    Hello,

    Please disable the header clone: https://xtemos.com/docs/woodmart/header-builder/global-header-settings/

    Then enable sticky header for all the columns: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

    And hide the columns as per your needs. You do not need any CSS.

    Best Regards

    January 29, 2021 at 7:48 pm #262498

    kyllaz
    Participant

    Hi there.
    That doesnt work because if i hide the columns on the settings they disappear when its not sticky.
    The only way i was able to reach the effect i need i with css but then i have the bug that it recognizes the general header on the sticky even if it is hidden.
    Do you know any other solution?

    Best regards

    January 30, 2021 at 11:44 am #262611

    Elise Noromit
    Member

    Hello,

    Please clarify so that I could give you the CSS:

    Deskotp default: main row + bottom row.

    Desktop sticky: main row.

    Mobile default main row and bottom row.

    Mobile sticky: bottom

    Is that correct?

    Best Regards

    January 31, 2021 at 5:07 pm #262794

    kyllaz
    Participant

    Hi there thanks for the reply.
    Yes i have exactly as you describe. Hope you can help me =)
    Many thanks Elise

    February 1, 2021 at 7:06 pm #263064

    Elise Noromit
    Member

    Hello,

    1. Hide the top row on desktop and on mobile (mobile view) https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/

    2. Make the main and bottom rows visible and sticky.

    3. Please add this code to the Theme Settings > Custom CSS > Desktop:

    .whb-sticked .whb-header-bottom{
display:none;
}

    4. Please add this code to the Theme Settings > Custom CSS > Tablet/Mobile :

    .whb-sticked .whb-general-header{
display:none;
}

    Best Regards

    February 1, 2021 at 7:48 pm #263079

    kyllaz
    Participant

    Many thanks Elise!
    All is great now =)
    Maybe in the future you can haver the selection for sticky by resolution on the header builder.

    You can close this ticket.

    Best regards

    February 1, 2021 at 8:25 pm #263097

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Sticky header on desktop and mobile’ is closed to new replies.