{"id":191,"date":"2021-07-02T12:03:31","date_gmt":"2021-07-02T12:03:31","guid":{"rendered":"https:\/\/apressthemes.com\/help\/?post_type=docs&#038;p=191"},"modified":"2021-07-20T04:49:26","modified_gmt":"2021-07-20T04:49:26","password":"","slug":"how-to-create-fullscreen-menu","status":"publish","type":"docs","link":"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/","title":{"rendered":"How to create Fullscreen Menu"},"content":{"rendered":"<p><strong>Add a full screen menu to your site in Hamburger Menu On Click Action<br \/>\n<\/strong>Using WP Bakery Page Builder Header (Elementor Version Coming Soon)<strong><br \/>\n<\/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<p>&nbsp;<\/p>\n<h3>Selecting Full Screen Template ( previously created )<\/h3>\n<p>Here you can select from<\/p>\n<ul>\n<li>Default &#8211; This will show the selected menu in the full scree menu . Fixed Style<\/li>\n<li>Page Builder &#8211; Here you can use any of the custom designed template using page builder- Once selected it will show the list of available templates to select from.<\/li>\n<li>Check the link &#8211; <a href=\"https:\/\/apressthemes.com\/help\/docs\/design-customize-full-screen-menu-page\/\"><strong>https:\/\/apressthemes.com\/help\/docs\/design-customize-full-screen-menu-page\/<\/strong><\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id='gallery-1' class='gallery galleryid-191 gallery-columns-2 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/default-full-screen-menu\/'><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"545\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Default-Full-Screen-Menu.png\" class=\"attachment-large size-large\" alt=\"\" aria-describedby=\"gallery-1-1311\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Default-Full-Screen-Menu.png 740w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/Default-Full-Screen-Menu-300x221.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-1311'>\n\t\t\t\tDefault Full ScreenMenu\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/page-builder-full-screen-menu\/'><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"535\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/page-builder-Full-Screen-Menu.png\" class=\"attachment-large size-large\" alt=\"\" aria-describedby=\"gallery-1-1314\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/page-builder-Full-Screen-Menu.png 743w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/page-builder-Full-Screen-Menu-300x216.png 300w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-1314'>\n\t\t\t\tFull Screen Menu Using Page Builder\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h3>Background Image\/ Video &amp; Styling<\/h3>\n<ul>\n<li>Customize background image \/ Video for full screen menu page template<\/li>\n<li>Customize text \/ Link color and hover color<\/li>\n<\/ul>\n<p><a href=\"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/bgstyling-full-screen-menu\/\" rel=\"attachment wp-att-1310\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1310\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/BgStyling-Full-Screen-Menu.png\" alt=\"\" width=\"737\" height=\"662\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/BgStyling-Full-Screen-Menu.png 737w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/BgStyling-Full-Screen-Menu-300x269.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Select Loading Styles<\/h3>\n<p>Here you can select from available list of loading styles and also customize color<\/p>\n<p><a href=\"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/loading-styles-full-screen-menu\/\" rel=\"attachment wp-att-1313\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1313\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/loading-styles-Full-Screen-Menu.png\" alt=\"\" width=\"737\" height=\"624\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/loading-styles-Full-Screen-Menu.png 737w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/loading-styles-Full-Screen-Menu-300x254.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Extras ( To position HM outside Header area)<\/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><a href=\"https:\/\/apressthemes.com\/help\/docs\/how-to-create-fullscreen-menu\/position-full-screen-menu\/\" rel=\"attachment wp-att-1315\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1315\" src=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/position-Full-Screen-Menu.png\" alt=\"\" width=\"727\" height=\"658\" srcset=\"https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/position-Full-Screen-Menu.png 727w, https:\/\/apressthemes.com\/help\/wp-content\/uploads\/2021\/07\/position-Full-Screen-Menu-300x272.png 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add a full screen menu to your site in Hamburger Menu On Click Action Using WP Bakery Page Builder Header (Elementor Version Coming Soon) Adding Hamburger Menu to your Header Open\/ Edit the Header design using Page Builder Add Element&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[7],"doc_tag":[52],"class_list":["post-191","docs","type-docs","status-publish","hentry","doc_category-hamburger-menu","doc_tag-fullscreen-menu"],"year_month":"2026-04","word_count":260,"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":[{"term_name":"Fullscreen Menu","term_url":"https:\/\/apressthemes.com\/help\/docs-tag\/fullscreen-menu\/"}],"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\/191","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=191"}],"version-history":[{"count":0,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs\/191\/revisions"}],"wp:attachment":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_category?post=191"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_tag?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}