{"id":23970,"date":"2021-05-13T15:00:17","date_gmt":"2021-05-13T13:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=23970"},"modified":"2021-06-02T14:14:00","modified_gmt":"2021-06-02T12:14:00","slug":"how-to-create-fullscreen-menu-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-fullscreen-menu-in-wordpress\/","title":{"rendered":"How to Create a Fullscreen Menu in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Nothing defines a good UX like intuitive <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-website-navigation\/\">website navigation<\/a>. Menus, for instance, are among key navigation elements that, if done right, can greatly enhance the user experience of your website. They can even be a determining factor in whether they will keep browsing your site or flee, which is why you should be extra careful when designing them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Fullscreen menus in particular have become increasingly popular over the years, as they are practical, creative and allow for some design experimentation. Thus, we have decided to talk in more detail about <strong>the pros (and cons) of fullscreen menus<\/strong>, as well as show you <strong>how you can set up a fullscreen menu on your WordPress site.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While many WordPress themes allow you to create a fullscreen menu, there are also plenty of them that don\u2019t come with this option out of the box. For this reason, we\u2019ve made sure to offer solutions that will allow everyone to generate a fullscreen menu on their WordPress site with ease.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Stick around as we show you:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-pros-and-cons-of-having-a-fullscreen-menu\">The Pros and Cons of Having a Fullscreen Menu<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-fullscreen-menu-with-a-plugin\">Creating a Fullscreen Menu With a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-fullscreen-menu-in-qode-themes\">Creating a Fullscreen Menu in Qode Themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;fullscreen-menu-themes&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-pros-and-cons-of-having-a-fullscreen-menu\"><\/a>The Pros and Cons of Having a Fullscreen Menu<\/h2>\n<p>[\/vc_column_text][vc_column_text]What\u2019s typical of a fullscreen menu is that <strong>it is initially hidden from view and is accessed by clicking on a menu opener icon<\/strong> usually located somewhere on the side of the screen. This icon is easily recognizable as it most often appears in a form of two or three horizontal lines (otherwise known as a hamburger icon) or dots.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1902\" height=\"965\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Carina-Fullscreen-Menu.gif\" class=\"attachment-full size-full\" alt=\"Carina Fullscreen Menu\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And while this menu icon, in our opinion, is intuitive enough in itself, some users may still get confused with this type of navigation. Namely, most people are used to seeing standard website navigation with menu links that are instantly visible somewhere at the top of the screen. So if a fullscreen menu (that is initially hidden from view) is the only type of navigation available, it can potentially disorient some website visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, a fullscreen menu still remains superior when it comes to introducing some creativity into your navigation. Since the entire structure of the fullscreen menu gets displayed across the entire screen, this gives you plenty of room for experimentation. For instance, you can <strong>style your menu in any way you want without disrupting the rest of the website design<\/strong>. With a fullscreen menu, you also have enough space to insert any additional elements. For example, you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-social-media-icons-to-wordpress-menu\/\">add social media icons<\/a>, your website logo, some additional info about you on your brand, and anything else you deem appropriate.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In general, you can play around with the design and create a rather remarkable fullscreen menu that will help your website stand out in a unique way. There are some <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\/\">impressive examples of fullscreen menus<\/a> out there that perfectly illustrate the creative potential of this navigation type.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In short, a fullscreen menu is great because <strong>it has a dual role<\/strong>, in a way. When tucked away behind a single menu opener icon,<strong> it keeps the rest of the website design clean, simple, and minimalistic<\/strong>. On the other hand, <strong>it gives you the ability to create a unique-looking menu that is still intuitive and easy to navigate<\/strong> when opened. As such, it is the ideal type of navigation for all sorts of websites out there, including digital agencies, online portfolios, creative studios, and different types of interactive showcases.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, this menu may not be the best solution for some websites, like online shops or businesses that have many pages on their site in general. These types of websites usually offer plenty of products and\/or services and require a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-mega-menu-tutorial\/\">multilayered type of navigation<\/a>. That is not to say that a fullscreen menu cannot be used to effectively display multiple products on a site, but it\u2019s simply not considered standard practice. That\u2019s because such websites usually have plenty of items that need to be displayed within a menu. Therefore, if you require a practical type of navigation and you don\u2019t care much for the visual style, a more classical menu may work better for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With all this said, let\u2019s take a look at how you can add a fullscreen menu to your WordPress site. We will show you how you can do this with the help of a plugin first, and then using one of our themes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-fullscreen-menu-with-a-plugin\"><\/a>Creating a Fullscreen Menu With a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If the theme you\u2019re using doesn\u2019t come with the fullscreen menu functionality, don\u2019t worry &#8211; you can easily add one using a plugin. Our choice is <a href=\"https:\/\/wordpress.org\/plugins\/animated-fullscreen-menu\/\" target=\"_blank\" rel=\"noopener\">FullScreen Menu<\/a>, a great plugin that comes with plenty of options and allows for a comprehensive customization of your fullscreen menu. The free version of the plugin allows you to set various fullscreen design and appearance-related features, such as fonts, animations, hover effects, and more. If you choose to upgrade to the pro version, you will get access to some additional features, like options that allow customization of a menu opener icon, the ability to add a background image, change menu text alignment, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/FullScreen-Menu.jpg\" class=\"attachment-full size-full\" alt=\"FullScreen Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/FullScreen-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/FullScreen-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/FullScreen-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/FullScreen-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before you begin adding a fullscreen menu using a plugin, don\u2019t forget to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">create a navigation menu<\/a> using<em> Appearance &gt;&gt; Menus<\/em> first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a> and activating it, <strong>find the<em> Fullscreen Menu Options<\/em> button in your admin dashboard and click on it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open an options screen where you will get to access several different tabs to configure the plugin to your liking.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First off, the <em>Settings<\/em> tab gives you access to a few rather useful options. Here, you will be able to <strong>activate the animated fullscreen menu<\/strong>, choose whether you want to <strong>show the menu to admin users only<\/strong>, or <strong>make it appear only on mobile devices<\/strong>. You will also get to auto-hide the menu on scroll or choose to hide it on specific pages.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"741\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Settings-300x229.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Settings-768x587.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Settings-620x474.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the<em> Design\/Appearance<\/em> tab, you will get to set different design and appearance elements of your fullscreen menu, including background, font, and animation.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"729\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Design-Appearance.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options Design Appearance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Design-Appearance.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Design-Appearance-300x226.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Design-Appearance-768x578.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Design-Appearance-620x466.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Background image\/Color<\/em> section contains fields for changing the color when the menu is opened and when it\u2019s closed, and the ability to add a background image (which is available only if you upgrade to the pro version of the plugin).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"447\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Background-Image-Color.jpg\" class=\"attachment-full size-full\" alt=\"Background Image Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Background-Image-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Background-Image-Color-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Background-Image-Color-768x354.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Background-Image-Color-620x286.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Font\/Appearance<\/em> section, you will get to change the font color of your menu items, as well as for social icons and the menu opener\/hamburger icon.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"565\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Font-Appearance.jpg\" class=\"attachment-full size-full\" alt=\"Font Appearance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Font-Appearance.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Font-Appearance-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Font-Appearance-768x448.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Font-Appearance-620x362.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will also be able to select the font family, size (which is a pro feature), font weight, and add scrolling (which is useful in case your main menu needs to have more height).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <em>Animation settings<\/em> screen will allow you to choose your animation type (the effect that appears when you open a menu), enable the side lateral menu instead of a fullscreen menu, select a hover effect, and more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"477\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Animation-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Animation Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Animation-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Animation-Settings-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Animation-Settings-768x378.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Animation-Settings-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you upgrade to the pro version of the plugin, you will have a few more options at your disposal, such as the ability to change the button position, choose a burger button image, change the menu text alignment, and unfix your burger button (customize its position).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pro-Version-Features.jpg\" class=\"attachment-full size-full\" alt=\"Pro Version Features\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pro-Version-Features.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pro-Version-Features-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pro-Version-Features-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Pro-Version-Features-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Menu Content<\/em> tab offers more useful options. Most importantly,<strong> here, you need to select a menu that you want to be displayed as your fullscreen menu<\/strong>, i.e. assign a specific menu (that you\u2019ve previously created in<em> Appearance &gt;&gt; Menus<\/em>) to your fullscreen navigation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, you will be able to add any additional shortcodes or HTML, include <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-privacy-policy-to-wordpress\/\">a privacy policy page<\/a>, add social icons, and more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"695\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Menu-Content.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options Menu Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Menu-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Menu-Content-300x215.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Menu-Content-768x551.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Menu-Content-620x445.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The WooCommerce tab allows you to add a WooCommerce menu (specifically My Account, Shop, Cart, and Checkout menus), and a WooCommerce cart (which is a pro feature).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-WooCommerce.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options WooCommerce\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-WooCommerce.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-WooCommerce-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-WooCommerce-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-WooCommerce-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the<em> Remove Data<\/em> tab lets you enable the option that will remove your data related to your fullscreen menu in case you end up <a href=\"https:\/\/qodeinteractive.com\/magazine\/uninstall-wordpress-plugin\/\">uninstalling the plugin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Remove-Data.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options Remove Data\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Remove-Data.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Remove-Data-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Remove-Data-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Remove-Data-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you should save your changes using the <em>Save Changes<\/em> button at the bottom of each tab to store any settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Options Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Save-Changes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Save-Changes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Options-Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re satisfied with the way you configured your fullscreen menu options (and after you\u2019ve made sure to select a menu to be displayed in your fullscreen navigation), you should go ahead and check out the look of your menu.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1894\" height=\"965\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Volati-Fullscreen-Menu.gif\" class=\"attachment-full size-full\" alt=\"Volati Fullscreen Menu\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-fullscreen-menu-in-qode-themes\"><\/a>Creating a Fullscreen Menu in Qode Themes<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re using (or plan to use) <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">a Qode theme<\/a> for your WordPress site, you\u2019ll be happy to learn that our themes come packed with a set of comprehensive options that allow you to create a fully responsive, intuitive, and user-friendly fullscreen menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We also have to mention that there are many <a href=\"https:\/\/qodeinteractive.com\/theme-layout\/fullscreen-menu-wordpress-themes\/\">WordPress themes with fullscreen menus<\/a> that contain a built-in and responsive fullscreen menu out of the box. Of course, if you want to further customize your fullscreen menu and style in any way you want, you will be able to do so with ease.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to do that using the <a href=\"https:\/\/bridgelanding.qodeinteractive.com\/\">Bridge theme<\/a> as an example. Before we begin, however, we should note that some specific options may vary from theme to theme. Still, the following example should give you a good idea of what you can expect if you\u2019re using one of our themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you prefer to follow video instructions, you can also check out our video on the same topic:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/m1XH-Nhffx8\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]Once you\u2019re in the admin dashboard area,<strong> access the <em>Qode Options<\/em> screen and choose the <em>Header<\/em> option.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Options-Header.jpg\" class=\"attachment-full size-full\" alt=\"Qode Options Header\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Options-Header.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Options-Header-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Options-Header-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Options-Header-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There, you will find a neat set of links that will allow you to jump to the specific section once you click on them. <strong>To access the<em> Fullscreen Menu<\/em> section, simply click on the anchor link with the same name.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will immediately see the option that allows you to enable a fullscreen menu. Simply click <em>Yes<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, a whole new set of fullscreen menu-related options will open.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Enable-Fullscreen-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Enable Fullscreen Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Enable-Fullscreen-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Enable-Fullscreen-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Enable-Fullscreen-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Enable-Fullscreen-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Save-Changes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Save-Changes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you hit the <em>Save Changes<\/em> button, you should go to <em>Appearance &gt;&gt; Menus<\/em> to assign a menu to the fullscreen menu navigation.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"665\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menus-Select.jpg\" class=\"attachment-full size-full\" alt=\"Menus Select\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menus-Select.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menus-Select-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menus-Select-768x527.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Menus-Select-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There, you will also see the <em>Menu Settings<\/em> section. <strong>Mark the \u201cFullscreen Navigation\u201d box<\/strong> and hit the <em>Save Menu<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"542\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Fullscreen-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Save Fullscreen Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Fullscreen-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Fullscreen-Menu-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Fullscreen-Menu-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Save-Fullscreen-Menu-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you only want the fullscreen navigation menu to appear on your site, go to the <em>Manage Locations<\/em> tab and set the other navigation types to default (\u201cSelect a Menu\u201d).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Manage-Locations.jpg\" class=\"attachment-full size-full\" alt=\"Manage Locations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Manage-Locations.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Manage-Locations-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Manage-Locations-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Manage-Locations-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After hitting the <em>Save Menu<\/em> button, you can go ahead and preview your homepage. You will see that now only your fullscreen menu navigation is activated.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"487\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Opener.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Opener\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Opener.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Opener-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Opener-768x386.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Opener-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, go to <em>Qode Options &gt;&gt; Header<\/em> and scroll to <em>Fullscreen Menu<\/em> once again to set some design options related to your menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Fullscreen Menu Overlay Animation<\/em>, for example, lets you decide on an animation type for the fullscreen menu overlay (you can choose from Fade Push Text Right, Fade Push Text Top, and Fade Text Scaledown).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Animation.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Animation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Animation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Animation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Animation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Animation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also replace your default fullscreen menu logo image (the one located in the top left corner when you click on the fullscreen menu).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Menu Icon Style<\/em> option allows you to choose the style for your menu opener. You can pick the default type, or something from Font Awesome and Font Elegant.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another useful set of options are the ones that concern the style of your menu (both the first and the second level). This includes font family, font size, line height, font style, weight, etc.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"422\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Font-Styles.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Font Styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Font-Styles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Font-Styles-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Font-Styles-768x334.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Font-Styles-620x270.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you will also be able to set the background color (and transparency) for the menu, choose your background image (if you prefer to have an image for your background instead of one color), and the color for your close button.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"369\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Additional-Options.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Menu Additional Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Additional-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Additional-Options-300x114.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Additional-Options-768x292.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fullscreen-Menu-Additional-Options-620x236.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By clicking on <em>Header Button Icons<\/em>, you scroll directly to the area where you can predefine your options for the menu opener icon. This includes the icon color, hover color, and size.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Button-Icons.jpg\" class=\"attachment-full size-full\" alt=\"Header Button Icons\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Button-Icons.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Button-Icons-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Button-Icons-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Button-Icons-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When it comes to the icon size, you will see two different fields.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One field allows you to enter a custom size, which applies if you\u2019re using the icon from one of the icon families, such as Font Awesome. In case you\u2019re using the default icon, you should use the other (Side Menu \/ Fullscreen Menu Icon Size) field. You will be able to choose from Normal, Medium, and Large).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Icon-Size-and-Size-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Icon Size and Size Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Icon-Size-and-Size-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Icon-Size-and-Size-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Icon-Size-and-Size-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Icon-Size-and-Size-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done configuring all the design settings, you can go ahead and see the way your fullscreen menu looks like.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1894\" height=\"965\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Bridge-Fullscreen-Menu.gif\" class=\"attachment-full size-full\" alt=\"Bridge Fullscreen Menu\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re using Bridge as well, in case you don\u2019t see the menu opener in the header even after having followed all these steps for setting your fullscreen menu, the reason might be that you have selected a header type that doesn\u2019t support the fullscreen menu. In that case, you should head to <em>Qode Options &gt;&gt; Header<\/em> once again.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Scroll to the <em>Header<\/em> section (by clicking on the anchor link with the same name). You will be able to see that Bridge supports a few different header types, such as Fixed, Sticky, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"915\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Type.jpg\" class=\"attachment-full size-full\" alt=\"Header Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Type-300x283.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Type-768x725.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Header-Type-620x585.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Some of these header layouts are designed for a more minimalistic style, therefore some of them won\u2019t support the fullscreen menu opener icon.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you select a Fixed Header Top or Sticky Divided Header, your menu opener won\u2019t show. So make sure to choose any of the other available header layouts for your opener to appear.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]A fullscreen menu is a great opportunity to <strong>present the most important links of your site in a way that will keep things clean, simple, and minimalistic for users<\/strong>. At the same time, it also allows you to get creative and add a layer of uniqueness to your site that will help differentiate you from the rest.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, you should <strong>remember to always keep users in mind when organizing your fullscreen navigation system<\/strong>. You can do this by making sure that your menu is easy to find and is as intuitive to use as possible. No matter if you\u2019re using one of our themes, or require the help of a plugin, if you end up following our instructions, you\u2019ll be able to build a beautiful and functional fullscreen menu in no time.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Interested in learning how to add a fullscreen menu in WordPress? We will show you how to do this with the help of a plugin and also using one of our themes.<\/p>\n","protected":false},"author":2,"featured_media":24016,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,16,4,13],"class_list":["post-23970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-themes","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=23970"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/24016"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=23970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=23970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=23970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}