GeneratePress slide out navigation menuThe design style of the web page is simple and simple. It is easy to use as a navigation menu, and it can also be used in gadgets.Weiss notes share the detailed steps of how to create a slide out navigation of GeneratePress.
1. What does the GeneratePress slide out navigation menu look like?
As shown in the figure below, there are three horizontal navigation icons in the upper right corner of the page. After clicking, a slide out navigation menu will appear. There can also be multiple multi-level menus under each main menu.
Two core 4G memory and 3M bandwidth are selected for the theme and plug-in of foreign website construction, which can run smoothly. Domestic servers:Alibaba Cloud、Tencent Cloud(All have vouchers, which can be used to save money when paying),I don't know how to select regions and configurations. Please add Lao Wei's contact information on the right side of the page. Let's study it together.
Slide out navigation is an advanced function provided by the GP Premium plug-in. After purchasing and installing the GP Premium plug-in below, upload, install and enable it.
Log in to WordPress background>Appearance>GeneratePress, and then enable the Colors, Menu Plus, and Typography modules.These three modules are respectively responsible for slide out navigation function, slide out navigation background color, and slide out navigation font color.With these three modules, the slide out navigation function can be comprehensively designed.
Check Off Canvas Menu in the menu settings, and it will become a slide out navigation menu.
4. Open slide out navigation menu
After the above preparations are completed, you can start and slide out the navigation menu.
Open WordPress Background>Appearance>Customize, enter layout layout>off canvas panel, the first option is on, off, mobile only, desktop only, etc., and select four states: on, off, mobile only, desktop only.Of course, we choose on.
Style: slide, overlay.Sliding means that the navigation menu appears by sliding on the left or right;Overlay is the full screen overlay page content style.
Slide: If slide is selected above, select left or right, and the left and right sides of slide navigation will appear.
Close Button: close button.It is X, the button to turn off sliding navigation, that appears inside the inside navigation or outside the outside navigation.
Menu Item Height: navigation menu height.Adjust the navigation menu height.
While adjusting the settings above, you can see the results in real time on the right page, which is very convenient.
5. Slide out font and color settings of navigation menu
You can also change the default font and color style, including font size, background color, font color, etc.
Modify font: Customize>Typography font>Off Canvas Panel slide out navigation
Modify color: Customize>Colors>Off Canvas Panel slide out navigation
6. Widgets add elements to slide out navigation
If you want to add other elements in the slide out navigation, you can add them in the gadget.
Navigate to WordPress background>Appearance>Widgets, click+and select to add appropriate elements toOff Canvas PanelSlide out of the navigation module.
The old Wei demo uses the Gutenberg editor to add a picture or other appropriate elements, such as paragraphs, titles, buttons, videos, tables, and so on.
If you use a classic editor, you can drag any existing elements from the left side to display them.
Let's take a look at the results achieved as follows:
You can even use widgets to add content without making navigation menus.
GeneratePress slide out navigation is very flexible. As long as you take time to polish it carefully, you can make a beautiful slide out navigation.
Article name: How to create a GeneratePress slide out navigation menu Article link:https://www.vpsss.net/26409.html Copyright notice: The resources of this website are only for personal learning and exchange, and are not allowed to be reproduced and used for commercial purposes, otherwise, legal issues will be borne by yourself. The copyright of the pictures belongs to their respective creators, and the picture watermark is for the purpose of preventing unscrupulous people from stealing the fruits of labor.
