{"id":13321,"date":"2023-05-06T01:55:39","date_gmt":"2023-05-06T05:55:39","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&#038;p=13321"},"modified":"2023-05-08T10:04:07","modified_gmt":"2023-05-08T14:04:07","slug":"adjust-the-height-of-the-menu-in-layout-1","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/how-to\/adjust-the-height-of-the-menu-in-layout-1\/","title":{"rendered":"Adjust the height of the menu in Layout 1."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Use the instructions below to adjust the menu height of Layout 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>BEFORE<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2018\/08\/knowledge_base_layout_01a.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2018\/08\/knowledge_base_layout_01a.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>AFTER<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2018\/08\/knowledge_base_layout_01a2.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2018\/08\/knowledge_base_layout_01a2.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1)<\/strong>&nbsp;Log into your App Manager and&nbsp;<strong>select your app<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2)<\/strong>&nbsp;Click&nbsp;<strong>Colors<\/strong>&nbsp;from the left-hand-side of the screen (or the middle of the screen).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3)<\/strong>&nbsp;Scroll down to the&nbsp;<strong>Advanced SCSS box<\/strong>.&nbsp;If there is already code in the box do not delete it!&nbsp;Simply add this code &#8220;below&#8221; the last character of code in the box.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** BEGIN: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 01 ***\/\n\n.layout.l1 {\nul.tabs {\nli img {\nwidth: 26px;\nheight: 26px;\nmax-height: 100%;\ntransform: translateY(-2px);\n}\nli p {\ntransform: translateY(-6px);\n}\n}\n}\n\/*** END: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 01 ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You can also use this edit:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** BEGIN: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 02 ***\/\n.layout.l1 .tabs, .layout.l10 .tabs, .layout.l2 .tabs {\nheight: 75px;\npadding: 4px;\npadding-top: 0;\n}\n\/*** END: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 02 ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You can also use this edit:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** BEGIN: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 03 ***\/\n\n.platform-ios{ .layout.l1 { ul.tabs { li img { width: 24px; height: 24px; max-height: 70%; transform: translateY(-5px); } li p { transform: translateY(-10px); } } }}\n\n\/*** END: LAYOUT 1 - ADJUST MENU HEIGHT - OPTION 03 ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4)<\/strong>Click&nbsp;<strong>Save<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE:<\/strong> The edits above also work with other layouts. For example, to use it with layout 10, change the &#8220;l1&#8221; to &#8220;l10&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use the instructions below to adjust the menu height of Layout 1. BEFORE AFTER 1)&nbsp;Log into your App Manager and&nbsp;select your app. 2)&nbsp;Click&nbsp;Colors&nbsp;from the left-hand-side of the screen (or the middle of the screen). 3)&nbsp;Scroll down to the&nbsp;Advanced SCSS box.&nbsp;If there is already code in the box do not delete it!&nbsp;Simply add this code &#8220;below&#8221; the last character of code in the box. You can also use this edit: You can also use this edit: 4)Click&nbsp;Save. NOTE: The edits above also work with other layouts. For example, to use it with layout 10, change the &#8220;l1&#8221; to &#8220;l10&#8221;.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[35],"class_list":["post-13321","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-how-to"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=13321"}],"version-history":[{"count":4,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13321\/revisions"}],"predecessor-version":[{"id":14187,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13321\/revisions\/14187"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=13321"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=13321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}