0

I want to create two headers one for desktop and other for mobile.

How can I achieve this, do i need to edit default.xml or need to add some conditions to meet the requirements ?

0

It is not possible to detect mobile via xml layout, you have to create your two header, then you display it just for mobile via css media queries

A quick example :

<div class="header-desktop">...</div>
<div class="header-mobile">...</div>

css:

.header-mobile {
    display:none;
}

@media screen and (max-width : 768px) {
    .header-mobile {
         display:block !important;
    }

    .header-desktop {
         display:none !important;
    }
}
0

Normally we use CSS to achieve responsive website ("different layout" in mobile and desktop).

So what you can do is add the components to the place you need both in mobile as well as desktop. Then give them different class like:

desktop(display:none; when screen < 800px)

mobile(display:none; when screen > 801px)

So in the layout, it may looks like:

 <referenceContainer name="head.block">
    <container name="navigation.wrapper" htmlClass="mobile">
       <block name="navigation" class="../../../../../../" template="../../../" />
    </container>
</referenceContainer>
<referenceContainer name="body.top">
    <container name="navigation.second.wrapper" htmlClass="desktop">
     <block name="navigation.second" class="../../../../../../" template="../../../" />
    </container>
</referenceContainer>

Then you have two navigation in the layout but only one will display in desktop screen size, and the other will display in mobile screen. or you can do by select different theme for both layout.

  • thanks for the reply, but i want to create two headers which includes logo search minicart etc, how can i achieve that? – Mukesh Oct 7 at 10:20
  • in above code you can mentioned your template file then call this. – Sangeeta Chandaliya Oct 7 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.