Fixed Header widgetbar

[gimmechefs]

Hi Guys. I have used this css snippet in order to fix my header widget to top of page.

@media (max-width: 979px) {

.x-btn-widgetbar {
position: fixed;
}
}

It works perfectly. The problem i have is on mobile screen. If you are halfway down the page and hit the widget bar icon, it opens at the top of the page, and not where the user is on the page.

So, effectively the user keeps clicking the button to open the bar. And it doesnt open. They wouldnt think to scroll back to top of page to see contents.

Can you help me fix the dropdown content to top of page, along with widgetbar icon.

I will put my site in secure note, as it has a password to access it.

Cheers
Max

[tristup]

Hi @gimmechefs,

Thanks for reaching us.

The code mentioned in your post will with the sepcified screensize.
And in smaller screen it has been overridden by the default style.
To override the default style in various screensize you need mention in your code like the following one.
To know the different breakpoints of devices you can go through this article [ https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp ]

@media  (min-width: 380px) {
  .x-widgetbar {    
    position: fixed !important;
  }
}

Remember that the above code will work if copied as it is and dont conflict with any existing style.
Please note that the code provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps.

Thanks

[gimmechefs]

@tristup

@media (min-width: 380px) { .x-widgetbar { position: fixed !important; } }

Thanks for that. The min-width worked great.

[friech]

We are delighted to assist you with this.

Cheers!