Different Header Menu Settings For Desktop And Mobile View - Question | JoomShaper

Different Header Menu Settings For Desktop And Mobile View

RD

Robert Deutschmann

Helix Framework 1 year ago

Hi

For desktop view i would like the predefined Header "Multi Rows" and for mobile view the "Fullwidth Left". But it looks that the header settings are view independent.

How can i change that?

For desktop view i would like this "Multi Rows":

For mobile view i would like this "Fullwidth Left":

Thank you for support. br, Robert

0
3 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #161810

Hi there!

Thanks for reaching out.

There is no default option to achive that. But if you choose the multirow header style, then you got your desktop view as you want. Then for your mobile view you need some small customization with custom CSS to hide the topbar and make visible the offcanvas at the same row of the logo.

If you have tried this, kindly give me your site URL, so that I can give you the right css.

Best Regards

0
RD
Robert Deutschmann
Accepted Answer
1 year ago #161827

Hi

Thanks for your reply. The URL is https://ijmc.razorflights.com/

Best regards

0
RD
Robert Deutschmann
Accepted Answer
1 year ago #162047

Hi

I solved it with this css-code:

/* hide the topbar and make visible the offcanvas at the same row of the logo on mobile phones */
@media (max-width: 991px) {
  #sp-header-topbar {
    visibility: hidden;
    height: 0px !important;
    margin: 0px !important;
  } 
}

Hope this code is ok - or do you have some good modifications? Best regards

0