{"id":1080,"date":"2021-07-08T12:53:54","date_gmt":"2021-07-08T12:53:54","guid":{"rendered":"https:\/\/localhost\/apdoc\/?post_type=docs&#038;p=1080"},"modified":"2021-07-20T09:07:09","modified_gmt":"2021-07-20T09:07:09","password":"","slug":"create-vertical-menu-in-hamburger-menu","status":"publish","type":"docs","link":"https:\/\/apressthemes.com\/help\/docs\/create-vertical-menu-in-hamburger-menu\/","title":{"rendered":"Create Vertical Menu In Hamburger Menu"},"content":{"rendered":"<p><strong>Add a Horizontal Menu to your site on Hamburger Menu On Click Action<\/strong><\/p>\n<h3>Adding Hamburger Menu to your Header<\/h3>\n<ul>\n<li>Open\/ Edit the Header design using Page Builder<\/li>\n<li>Add Element &#8211; Hamburger menu<\/li>\n<\/ul>\n<p><a href=\"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/add-hamburger-menu\/\" rel=\"attachment wp-att-1307\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1307\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/add-hamburger-menu.png\" alt=\"\" width=\"1425\" height=\"744\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/add-hamburger-menu.png 1425w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/add-hamburger-menu-300x157.png 300w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/add-hamburger-menu-1024x535.png 1024w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/add-hamburger-menu-768x401.png 768w\" sizes=\"auto, (max-width: 1425px) 100vw, 1425px\" \/><\/a><\/p>\n<h3>Select Hamburger Menu Icon \/ Custom Icon<\/h3>\n<ul>\n<li>Here you can select from Predesigned hamburger Menu Icon Or use your own custom Icon\/ Image as hamburger menu ( The Close Button only works with predesigned Hamburger Menu icons )<\/li>\n<li>You can also add Custom Text to the H Menu icon &#8211; Left\/ Right\/ Top (This will appear on hover) \/ Bottom<\/li>\n<li>Customize Hamburger Menu Icon background and style &#8211; Square \/ Round &#8211; Customize padding etc<\/li>\n<\/ul>\n<p><a href=\"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/hamburger-menu-design\/\" rel=\"attachment wp-att-1312\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1312\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/hamburger-menu-design.png\" alt=\"\" width=\"733\" height=\"663\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/hamburger-menu-design.png 733w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/hamburger-menu-design-300x271.png 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><\/a><\/p>\n<h3>Select Vertical Menu<\/h3>\n<p>Here you can select from<\/p>\n<ul>\n<li>Select Action- Menu<\/li>\n<li>On the menu Tab &#8211; Select Vertical Menu<\/li>\n<li>Select the Menu to show in Vertical Menu<\/li>\n<\/ul>\n<p><a href=\"https:\/\/apressthemes.com\/help\/docs\/create-vertical-menu-in-hamburger-menu\/select-vertical-menu\/\" rel=\"attachment wp-att-1341\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1341\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Select-vertical-menu.png\" alt=\"\" width=\"1400\" height=\"676\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Select-vertical-menu.png 1400w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Select-vertical-menu-300x145.png 300w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Select-vertical-menu-1024x494.png 1024w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Select-vertical-menu-768x371.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a><\/p>\n<h3>Extras<\/h3>\n<p>This is only required if you want to position the hamburger menu in any position of the screen ( outside header area ) like Bottom left \/ Left center etc.<\/p>\n<p><strong>Note &#8211; This will only change position of hamburger menu and not the action position of the Vertical Menu. So Not advised if you are not comfortable in customizing CSS.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add a Horizontal Menu to your site on Hamburger Menu On Click Action Adding Hamburger Menu to your Header Open\/ Edit the Header design using Page Builder Add Element &#8211; Hamburger menu Select Hamburger Menu Icon \/ Custom Icon Here&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[7],"doc_tag":[],"class_list":["post-1080","docs","type-docs","status-publish","hentry","doc_category-hamburger-menu"],"year_month":"2026-04","word_count":187,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"author_nicename":"tech_ac9x_hlp","author_url":"https:\/\/apressthemes.com\/help\/author\/tech_ac9x_hlp\/"},"doc_category_info":[{"term_name":"Hamburger Menu","term_url":"https:\/\/apressthemes.com\/help\/docs-category\/hamburger-menu\/"}],"doc_tag_info":[],"author_list":[{"ID":"2","user_login":"tech_ac9x_hlp","display_name":"Apress Help","id":"2"}],"_links":{"self":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs\/1080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/comments?post=1080"}],"version-history":[{"count":0,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs\/1080\/revisions"}],"wp:attachment":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_category?post=1080"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_tag?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}