WordPress knowledge sharing

WordPress floating notification bar sticky title menu plug-in myStickymenu

myStickymenu It's a WordPress floating notification bar Sticky title menu plug-in. Create a notice bar, sticky title menu, announcement, promotion and other top information bar for the website. This lightweight plug-in can also change CSS styles as needed.

1. MyStickymenu plug-in installation enabled

In the WordPress background>Plug in>Install Plug in, search for myStickymenu, install and enable it.

 MyStickymenu plug-in installation enabled

If the download of the domestic server is not successful, you can go to the official website of WordPress to download it and manually ftp it to the plug-in directory of the website.

2. MyStickymenu plug-in settings

After installation, you will be prompted to register their account, which is used to receive the latest feature notifications, promotions and other information. You can choose to skip it or use it without registering an account.

The plug-in can be used in two ways, one is to set the floating notification bar on the top, and the other is the sticky title menu.

3. MyStickymenu floating notification bar

After entering the plug-in settings, enable the welcome bar, and then the floating notification bar will take effect.

Now let's set some related parameters.

  • Position: Only top can be selected. Bottom is used for paid plug-ins.
  • Height: The paid plug-in can be modified.
  • Background Color and Text Color: can be customized and modified. Lao Wei suggested changing to a more eye-catching background color.
  • Font: Many fonts are available.
  • Font Size: Custom font size.
  • Bar Text: floating notice bar content.
  • Show X: It is displayed on both the desktop and mobile terminals by default.
  • Button: similar to the optional display position, button color, text color, text content and animation special effect on the bucket.
  • Button Submission: After the button is submitted, you can choose to redirect to the URL, close the notification bar, pop up window, etc. Generally, you can choose to redirect to the active page url.
  • After Submission: After submission, you can choose not to display the notification bar, display it again after the next visit, and display it on each page.
  • Entry effect: displays the effect of entering the page.
  • Finally, reset is to restore the default and save.

Let's see the display effect, as shown in the following figure:

Lao Wei set the URL to jump to an activity page by clicking the button, which is very easy to use.

 MyStickymenu plug-in floating notification bar effect

4. MyStickymenu Sticky Title Menu

To implement this function, you need to use a Chrome browser plug-in CSS Peeper. There is a direct installation method in the myStickymenu sticky title menu page.

If you are familiar with the WordPress theme source code, you can also manually search from the source code.

Lao Wei prefers to use CSS Peeper. Click it to quickly provide the CSS name, as shown in the following figure, which is the style sheet name of the entire header header.

How to make sticky menus?

Add the sticky menu title to the plug-in's sticky class, or use the div id name.

It is measured by Lao Wei that if the menu name is used, the customized sticky background color and sticky text color settings will be invalid. Therefore, it is recommended to select other classes or IDs, and then enter the style sheet name obtained by CSS Peeper above.

If you want, you can also use CSS Peeper to get the div name of the menu. In this way, the website logo and website name will not be displayed during the hybrid operation, and only the menu will be displayed. The display effect will be more specific.

 Add the sticky menu title to the plug-in's sticky class, or use the div id name.

Optional sticky z-index, fade in/fade out or sliding effect, whether it is disabled under small screen size, whether it is visible when scrolling, whether it is visible when scrolling on the home page, sticky background color, sticky text color, sticky transition time, sticky opacity, etc.

After Lao Wei changed the sticky background color and the sticky text color, the contrast effect between non scrolling and scrolling is shown in the following figure:

 After Lao Wei replaced the sticky background color and the sticky text color, the display effect without scrolling and after scrolling is shown in the following figure:
Like( one )
Article name: WordPress Floating Notification Bar Sticky Title Menu Plug in myStickymenu
Article link: https://www.vpsss.net/27512.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.