{"id":850,"date":"2023-05-21T07:57:30","date_gmt":"2023-05-21T06:57:30","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/mobile-view-of-the-site\/mobile-view-of-the-header\/"},"modified":"2023-05-21T07:59:01","modified_gmt":"2023-05-21T06:59:01","slug":"mobile-view-of-the-header","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/mobile-view-of-the-site\/mobile-view-of-the-header\/","title":{"rendered":"Mobile view of the header"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Header is a top block on a site that is typically used for building navigation. More information about this block you can find in the\u00a0<a href=\"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/header-settings\/\" target=\"_blank\" rel=\"noreferrer noopener\">Header settings<\/a>\u00a0article.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All header components in the mobile version of the site are moved to the so-called burger menu. Since large navigation menus can take up too much space on a mobile phone or be too small to read or click on the desired link, all content (buttons, navigation menus, social media icons) is hidden in the burger menu until the user expands it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, here&#8217;s how the header looks on the desktop:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"184\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o-1024x184.png\" alt=\"\" class=\"wp-image-851\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o-1024x184.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o-300x54.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o-768x138.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o-1536x276.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1022_w9w02o.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And here&#8217;s how it will look on the mobile devices:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5-1024x571.png\" alt=\"\" class=\"wp-image-852\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5-1024x571.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5-300x167.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5-768x428.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5-1536x856.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1023_1c1car5.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">By pressing the menu button, the visitors will see all hidden components:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6-1024x538.png\" alt=\"\" class=\"wp-image-854\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6-1024x538.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6-300x158.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6-768x403.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6-1536x806.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/template-1024_ru15o6.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note: <\/strong>The background of the burger menu is the color of a headers&#8217; background. Even if the header is transparent, the burger menu will take the previously specified color.<\/p>\n","protected":false},"featured_media":0,"parent":846,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-850","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":1,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/850\/revisions"}],"predecessor-version":[{"id":855,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/850\/revisions\/855"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/846"}],"next":[{"title":"Mobile view of the blocks with multiple items","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/mobile-view-of-the-site\/mobile-view-of-the-blocks-with-multiple-items\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/856"}],"prev":[{"title":"Paddings and fonts on mobile","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/mobile-view-of-the-site\/paddings-and-fonts-on-mobile\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/848"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}