Different header menu settings for desktop and mobile view - Forum | JoomShaper
Awaiting an answer Helix Framework

Different header menu settings for desktop and mobile view

Asked by Robert Deutschmann 2 years ago Last activity 2 years 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

3 replies

Rashida Rahman Staff

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

Robert Deutschmann Asked this

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

Log in to reply.