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.
now below is image for mobile header and I want to do this using layout.
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.
Best Answer
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:
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.