1

I will discuss this issue with live example.

I want different structured header layout for desktop and mobile version.

First I create page_layout home.xml in my theme path app/design/frontend/Package_name/Theme_name/Magento_Theme/page_layout.And this home.xml file is copied from 1column.xml after that I have added some Container as per my requirement.

Then I override default.xml file from vendor on this path app/design/frontend/Package_name/Theme_name/Magento_Theme/layout/override/base

below is default.xml file

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="default_head_blocks"/>
<body>
    <remove src="Solwin_FeaturedPro::css/featuredpro.css"/>
    <remove src="Solwin_FeaturedPro::css/owl.carousel.css"/>
    <remove src="Solwin_FeaturedPro::css/owl.theme.css"/>
    <remove src="Solwin_FeaturedPro::css/owl.transitions.css"/>
    <block name="require.js" class="Magento\Framework\View\Element\Template" template="Magento_Theme::page/js/require_js.phtml" />
    <referenceContainer name="after.body.start">
        <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
        <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
        <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
        <block class="Magento\Framework\View\Element\Js\Cookie" name="js_cookies" template="Magento_Theme::js/cookie.phtml"/>
        <block class="Magento\Theme\Block\Html\Notices" name="global_notices" template="html/notices.phtml"/>
    </referenceContainer>
    <referenceBlock name="top.links">
        <block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">
            <arguments>
                <argument name="show_part" xsi:type="string">welcome</argument>
            </arguments>
        </block>
    </referenceBlock>
    <referenceContainer name="main.content">
        <block class="Magento\Framework\View\Element\Template" name="skip_to_content.target" before="-" template="Magento_Theme::html/skiptarget.phtml">
            <arguments>
                <argument name="target_id" xsi:type="string">contentarea</argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceContainer name="header.container">            
        <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
            <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                <arguments>
                    <argument name="target" xsi:type="string">contentarea</argument>
                    <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                </arguments>
            </block>
            <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
          </container>
        <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
            <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
                <arguments>
                    <argument name="logo_img_width" xsi:type="number">189</argument>
                    <argument name="logo_img_height" xsi:type="number">64</argument>
                </arguments>
            </block> 
        <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>

        </container>
    </referenceContainer>
    <referenceContainer name="page.top">
        <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">
            <arguments>
                <argument name="group_name" xsi:type="string">navigation-sections</argument>
                <argument name="group_css" xsi:type="string">nav-sections</argument>
            </arguments>
            <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Menu</argument>
                </arguments>

            </block>
            <block class="Magento\Framework\View\Element\Text" name="store.links" group="navigation-sections">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Account</argument>
                    <argument name="use_force" xsi:type="boolean">true</argument>
                    <argument name="text" xsi:type="string"><![CDATA[<!-- Account links -->]]></argument>
                </arguments>
            </block>
            <block class="Ibnab\MegaMenu\Block\Html\Topmega" name="catalog.topnav" template="Ibnab_MegaMenu::html/top-mega.phtml">
        </block>

            <container name="top.container" as="topContainer" label="After Page Header Top" htmlTag="div" htmlClass="top-container"/>
            <block class="Magento\Theme\Block\Html\Breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
        </block>


        <block class="Magento\Theme\Block\Html\Breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
    </referenceContainer>
    <referenceContainer name="columns.top">
        <block class="Magento\Theme\Block\Html\Title" name="page.main.title" template="html/title.phtml"/>
        <container name="page.messages" htmlTag="div" htmlClass="page messages">
            <block class="Magento\Framework\View\Element\Template" name="ajax.message.placeholder" template="Magento_Theme::html/messages.phtml"/>
            <block class="Magento\Framework\View\Element\Messages" name="messages" as="messages" template="Magento_Theme::messages.phtml"/>
        </container>
    </referenceContainer>

    <referenceContainer name="main">
        <referenceContainer name="home.slider">
            <block class="Magestore\Bannerslider\Block\SliderItem">
              <action method="setSliderId">
                <argument name="sliderId" xsi:type="string">1</argument>
              </action>
            </block>
        </referenceContainer>
        <referenceContainer name="home.brand">
            <block class="Ves\Brand\Block\BrandList" name="brand_list">
                <arguments>
                    <argument name="number_item_per_column" xsi:type="string">1</argument>
                </arguments>
            </block>
        </referenceContainer>
        <referenceContainer name="home.blog">
            <block class="Mageplaza\Blog\Block\Post\Listpost" template="Mageplaza_Blog::post/home-blog.phtml"/>
        </referenceContainer>
        <container name="content.top" label="Main Content Top"/>
        <container name="content" label="Main Content Area"/>
        <container name="content.aside" label="Main Content Aside"/>
        <container name="content.bottom" label="Main Content Bottom"/>
    </referenceContainer>
    <referenceContainer name="page.bottom.container">
        <container name="page.bottom" label="Before Page Footer" htmlTag="div" htmlClass="content"/>
    </referenceContainer>
    <referenceContainer name="footer-container">
        <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="footer content">
            <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" template="switch/stores.phtml"/>
            <block class="Magento\Framework\View\Element\Html\Links" name="footer_links">
                <arguments>
                    <argument name="css_class" xsi:type="string">footer links</argument>
                </arguments>
            </block>
            <block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml"/>
            <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
            <block class="Magento\Cms\Block\Block" name="footer_links">
            <arguments>
                <argument name="block_id" xsi:type="string">footer_links</argument>
            </arguments>
            </block>

        </container>
            </referenceContainer>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\FormKey" name="formkey"/>
    </referenceContainer>
</body>
</page>

so my desktop header is showing like below image.

enter image description here

now below is image for mobile header and I want to do this using layout.

enter image description here

How can I set different layout of header for desktop and mobile version?

Like I want to add new Container for mobile version and want to remove some Container for mobile version that are appear in desktop version.

Hope someone out there will help.

Improve this question
2
  • I am not sure to manage through layout for differnt device using container. But you can show/hide classes besed on device and can set/design them using css for differnt devices.
    – Rushvi
    Jul 6, 2016 at 13:07
  • @RJ07 I'll try and let you know.:)
    – Dhaval
    Jul 6, 2016 at 13:52

2 Answers 2

Reset to default
1

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.

Improve this answer
1
  • 1
    It is not good for optimization.
    – 26vivek
    Jun 3, 2020 at 5:29
0

I tried different options but at the end to keep it easier to understand from the magento admin I added 2 themes desktop and mobile that override the module. I didn't needed to change the layout configuration in the modules.

module

app/code/acme/modulename/view/frontend/templates/main.phtml

desktop

app/design/acme_default/templates/main.phtml

mobile

app/design/acme_mobile/templates/main.phtml

Then added the acme_default at admin->content->design->configuration->edit Applided Theme

and added a new user agent rule for mobile with acme_moble

Improve this answer

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.