Friday, October 9, 2020

9 Best WordPress GDPR Plugins to Improve Compliance

Are you looking for a GDPR plugin to make sure your WordPress site is in compliance with regional laws?

All websites worldwide that collect data related to people in the European Union need to be GDPR compliant. There are several WordPress plugins that can help you with that.

In this article, we will share the best GDPR plugins for WordPress that you can use to make your website GDPR compliant.

The best GDPR plugins for your WordPress site

What is GDPR and Why Does It Matter?

GDPR stands for General Data Protection Regulation. It is a European Union (EU) law that gives individuals in the EU specific rights over accessing and controlling their data on the internet.

GDPR applies to all organizations across the world that collect or process data relating to individuals in the EU. For instance, if you live in the United States and run a business website or online store with customers in Europe, then you need to comply with GDPR.

Due to the dynamic nature of websites, no single plugin can offer 100% GDPR compliance. However many of the popular plugins have added GDPR friendly options to ensure that your website abides by the law.

Disclaimer: we’re not legal experts, but we have written the ultimate WordPress GDPR guide that you can refer to for more details. When in doubt, always consult an internet law attorney.

With that said, here are the best WordPress plugins that have GDPR compliance options.

1. MonsterInsights – GDPR Friendly Google Analytics

The MonsterInsights website

MonsterInsights is the best Google Analytics plugin for WordPress. It lets you easily add Google Analytics tracking code to your site, and displays powerful reports within your WordPress admin.

With MonsterInsights, it’s easy to anonymize or even disable personal data tracking. GDPR requires you to get explicit consent before you collect or process personal identifying information from EU residents, such as IP addresses.

To automatically anonymize data, simply use the MonsterInsights EU Compliance addon.

What if you want to track personalized data using Google Analytics? Then you simply need to get consent from your users. This can also be easily done with MonsterInsights.

The MonsterInsights EU Compliance add-on integrates seamlessly with the Cookie Notice plugin. That plugin is included below at #3 on our list. This means MonsterInsights will not load the analytics script until the user gives their explicit consent.

Plus, MonsterInsights is compatible with Google Analytics’ built-in cookie opt-out system as well, and it works seamlessly with Google Analytics’ Chrome browser opt-out extension.

Pricing: MonsterInsights costs from $99.50/year. This includes the EU Compliance addon.

2. WPForms – GDPR Friendly Contact Forms

The WPForms website

WPForms is the best contact form plugin for WordPress with built-in GDPR compliance.

You can use WPForms to create all sorts of forms, including contact forms, registration forms, order forms, booking forms, surveys, and more.

To make your forms compliant, simply go to plugin’s settings page and check the box next to GDPR enhancements option. Once you’ve done this, WPForms will not collect IP addresses on any of your forms.

You can also enable extra GDPR options. These include disabling user tracking cookies and disabling storing details of the user’s browser and operating system.

Another option with WPForms is to turn on GDPR protection for individual forms instead of for all your forms. To do this, you just need to check a box in the setting for each form.

WPForms also lets you add a special ‘GDPR Agreement’ checkbox field to your forms. You can add this to your form just like any other field.

GDPR Agreement field in WPForms

Pricing: WPForms costs from $39.50/year. There’s also a free version of WPForms that’s also GDPR compliant.

3. Cookie Notice for GDPR & CCPA

Cookie Notice for GDPR & CCPA

Cookie Notice for GDPR & CCPA is a free WordPress cookie notification popup plugin that lets users give or refuse consent for you to use cookies. It helps you comply with GDPR and also with CCPA (the California Consumer Privacy Act).

You can customize the cookie notice for your users and include links to your privacy policy or legal pages. It’s very quick and easy to get Cookie Notice up and running on your site.

The plugin is SEO friendly and it’s compatible with WPML if you have a multilingual website. It also integrates seamlessly with MonsterInsights and holds on to Google Analytics code until a user gives consent.

Pricing: Cookie Notice is completely free. There’s no premium version.

4. OptinMonster – GDPR Friendly Popups and Lead Gen Forms

The OptinMonster website

OptinMonster is a lead generation tool and one of the best popup creators for WordPress. It lets you create a wide range of email newsletter signup forms and optins that you can display in different ways on your site.

With OptinMonster, you can ensure that your email signup forms are GDPR compliant. It’s easy to add a privacy policy field with a customizable checkbox. Users can then only submit the form once they’ve checked the box.

If your organization is audited for GDPR compliance, OptinMonster also has a GDPR Audit Concierge team that can help you out. Plus, their friendly customer service team is always happy to answer questions about GDPR.

Even better, OptinMonster lets you target visitors based on their location. That way, you can make sure you’re showing GDPR-compliant optins to customers in EU countries.

Pricing: OptinMonster costs from $9/month (billed annually). For geolocation targeting, you need the Growth plan, which costs from $49/month.

5. GDPR Cookie Consent (CCPA Ready)

GDPR Cookie Consent

GDPR Cookie Consent covers CCPA as well as GDPR. It lets you create an alert bar on your site with Accept and Reject options so the user can decide whether to accept or reject cookies.

With this plugin, it’s straightforward to customize the cookie notice with your choice of colors, fonts, styles, positioning, and more. You can choose to put the cookie notice bar at the top or the bottom of your website.

Note that you need to list the specific cookies that the plugin restricts. The plugin can’t automatically block all cookies, or it could break your website.

Pricing: The basic version of GDPR Cookie Consent is free. You can upgrade to the premium version from $49/year.

6. Complianz

Complianz

Complianz lets you easily create cookie notices for different regions (EU, UK, US, or Canada). You can use it to create a GDPR ‘cookie wall’ as well as other types of banner.

With Complianz, there’s the built-in option to scan your site for cookies. This lets you automatically add cookie descriptions to your site.

Complianz has a simple, user-friendly setup process. It takes you step by step through getting the plugin up and running on your site.

The premium version lets you view statistics, use A/B testing to improve your cookie accept ratio, generate legally approved documents, and more. It’s also compatible with WordPress multisite networks.

Pricing: Complianz premium starts from $55/year. There is also a limited free version.

7. WP GDPR Compliance

WP GDPR Compliance

WP GDPR Compliance lets you automatically add a GDPR checkbox to certain areas of your site. This includes WordPress comments and registration, and also WooCommerce pages.

WP GDPR Compliance also makes it easy for users to request to see their data that’s stored in your database.

It providers a special Data Request page that lets users have temporary access to their information. They can also request that you delete their information, if they want to.

Pricing: WP GDPR Compliance is free. The developers welcome donations.

8. GDPR Cookie Compliance (Moove)

GDPR Cookie Compliance (Moove)

GDPR Cookie Compliance from Moove is a plugin that lets users enable or disable cookies on your site.

The cookie consent notice is fully customizable and editable so you can use your own text, logo, colors, and fonts.

The premium version include a ‘cookie wall’ that prevents users from seeing your site until they accept or reject cookies. You can also target users based on their location, and see stats about how many users accepted your cookies.

You need to add the scripts that use cookies into the plugin’s settings. Otherwise, it can’t block them.

Pricing: The basic version of GDPR Cookie Compliance is free. The premium version offers more features and costs from £49 (GBP).

9. EU Cookie Law for GDPR/CCPA

EU Cookie Law for GDPR/CCPA

EU Cookie Law for GDPR/CCPA lets you easily create a simple customizable banner for your website with your cookie policy. Users can then click to accept the cookies or click a link to see your privacy policy.

You can use shortcodes to prevent sections of code or even text from displaying if cookies aren’t accepted.

This plugin uses responsive design, so should look good on all mobile devices. It’s also fully compatible with WPML for multilingual websites.

EU Cookie Law for GDPR/CCPA is designed to be a lightweight plugin that will not affect your WordPress site’s speed and performance.

Pricing: EU Cookie Law for GDPR/CCPA is a free, open source plugin.

Which GDPR Plugin Should You Use?

The plugins you need for GDPR depends entirely on your needs.

If you’re not sure which to pick, here are the absolute must-have plugins:

Use MonsterInsights to easily add and control your Google Analytics tracking. It’s the best Google Analytics tool for WordPress, and it makes it very straightforward for you to comply with GDPR when it comes to analytics data.

Use WPForms to create GDPR compliant contact forms, registration forms, booking forms, and more. Adding GDPR compliance to your forms is as simple as checking a box.

Use Cookie Notice for GDPR & CCPA to display a cookie notification on your site. It integrates with MonsterInsights and it has lots of different options to customize how cookie consent works on your site.

We hope this article helped you learn about the best GDPR plugins for WordPress. You may also want to see our article on the best plugins for business websites, and our comparison of the best business phone services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 9 Best WordPress GDPR Plugins to Improve Compliance appeared first on WPBeginner.


October 09, 2020 at 05:00PM

Wednesday, October 7, 2020

How to Move a Live WordPress Site to Local Server

Do you want to move a live WordPress website to a local server on your computer?

Installing WordPress on your computer (local server) allows you to easily learn WordPress and test things. When you move a live WordPress site to a local server, it enables you to experiment with the same data as your live site.

In this article, we’ll show you how to easily move a live WordPress site to a local server without breaking anything.

Moving a live WordPress site to a local server on your computer

Why and Who Would Want to Move a live WordPress Site to Local Server?

If you have been running WordPress website for sometime, you may want to try out new themes or a plugin. However, doing this on a live website may result in poor user experience for your users.

To avoid this, many users create a copy of their WordPress website on a local server to test new themes, plugins, or do development testing.

This allows you to set up your theme with all your content and test all the features without worrying about breaking your site. Many users copy their site to a local server to practice their WordPress and coding skills with actual site data.

Even though you can do all the testing with dummy content in WordPress, real site data gives you a better visual representation of how these changes will appear on your live site.

Preparing to Move a Local Site to Local Server

First, you need to make sure that you always back up your WordPress website. There are several great WordPress backup plugins that you can use.

Secondly, you need to install a local server environment on your computer. You can use WAMP for Windows, and MAMP for Mac. Once you have set up the environment, you need to create a new database using phpMyAdmin.

Simply visit the following URL in your browser to launch phpMyAdmin.

http://localhost/phpmyadmin/
http://localhost:8080/phpmyadmin/

From here you need to click on ‘Databases’ tab and create a new database. You’ll need this database to later to unpack your live site data.

Create database

You are now ready to move your live WordPress site to local server.

Method 1. Moving Live WordPress Site to Local Server using Plugin

This method is easier and recommended for all users.

First thing you need to do is install and activate the Duplicator plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Duplicator allows you to easily create a duplicate package of your entire website. It can be used to move your WordPress site to a new location, and can also be used as a backup plugin.

Upon activation, the plugin adds a new “Duplicator” menu item in your WordPress admin sidebar. Clicking on it will take you to the packages screen of the plugin.

Creating new package in Duplicator

To create a new package, you need to click on the create new package button. Duplicator will start the package wizard, and you need to click on the Next button to continue.

Duplicator package set up

The plugin will then san your website and run some background checks. It will then show you a summary of those checks. If everything looks good, then click on the ‘Build’ button to continue.

Duplicator scan

Duplicator will now create your website package.

Once finished, you’ll see an archive zip file that contains all your website data, and an installer file. You need to download both files to your computer.

Download package files

You are now ready to unpack and install these files on your local server.

First, you need to create a new folder in your local server’s root folder. This is the folder where your local server stores all websites.

For instance, if you are using MAMP, then it will be /Applications/MAMP/htdocs/ folder. Alternatively if you are using WAMP, then it would be C:\wamp\www\ folder.

Inside this folder, you can make new folders for each new website that you want to import or create on your local server.

Creating a website folder on your local server

After that, you need to open the folder you created for your local website and then copy and paste both the archive zip file and the installer script you downloaded earlier.

Copy and paste Duplicator package and installer files

To run the installation, you need to open the installer.php script in your web browser.

For example if you pasted both files in /mylocalsite/ folder, then you will access them in your browser by visiting http://localhost/mylocalsite/installer.php.

You will now see the Duplicator installation script like this:

Duplicator installer screen

Click on the Next button to continue.

Duplicator will now unpack the archive zip file and will ask you to enter your local site’s database information. This is the database you created earlier.

Duplicator database information

The server name is almost always localhost and username is root. In most cases, your local server installation does not have a password set for root, so you can leave that blank.

At the bottom of the page, you’ll see a ‘Test Database’ button that you can use to make sure your database information is correct.

Test database connection

If everything looks good, then click on the ‘Next’ button to continue.

Duplicator will now import your WordPress database. After that, it will ask you to double-check the new website information that it has automatically detected.

Check local site information

Click on the Next button to continue.

Duplicator will now finish the setup and will show you a button to log into your local site. You’ll use the same WordPress user name and password that you use on your live site.

Import finished

That’s all, you have successfully moved your live site to local server.

Method 2. Manually Move a Live WordPress Site to Local Server

In case the plugin does not work for you, then you can always manually move your live site to a local server. The first thing you would need is to back up your website manually from your WordPress hosting account.

Step 1. Export your live site’s WordPress database

To export your live site’s WordPress database, you need to log into your cPanel dashboard and click on phpMyAdmin.

Note: We’re showing screenshots from Bluehost dashboard.

cPanel phpMyAdmin

Inside phpMyAdmin, you need to select the database you want to export and then click on the export tab on the top.

Export WordPress database manually

phpMyAdmin will now ask you to choose either quick or custom export method. We recommend using custom method and choosing zip as the compression method.

Sometimes WordPress plugins can create their own tables inside your WordPress database. If you are not using that plugin anymore, then the custom method allows you to exclude those tables.

Leave rest of the options as they are and click on the Go button to download your database backup in zip format.

Select export options

PhpMyAdmin will now download your database file. For more details, see our tutorial on how to backup your WordPress database manually.

Step 2. Download all your WordPress files

The next step is to download your WordPress files. To do that you need to connect to your WordPress site using an FTP client.

Once connected, select all your WordPress files and download them to your computer.

Download all your WordPress files

Step 3. Import your WordPress files and database to local server

After downloading your WordPress files, you need to create a folder on your local server where you want to import the local site.

If you are using WAMP then you would want to create a folder inside C:\wamp\www\ folder for your local site. MAMP users would need to create a folder in /Applications/MAMP/htdocs/ folder.

After that, simply copy and paste your WordPress files in the new folder.

Next, you need to import your WordPress database. Simply open the phpMyAdmin on your local server by visiting the following URL:

http://localhost/phpmyadmin/

Since you have already created the database earlier, you now need to select it and then click on the Import tab at the top.

Import WordPress database

Click on the ‘Choose File’ button to select and upload the database export file you downloaded in the first step. After that, click on the ‘Go’ button at the bottom of the page.

PhpMyAdmin will now unzip and import your WordPress database.

Now that your database is all set up, you need to update the URLs inside your WordPress database referencing to your live site.

You can do this by running an SQL query in phpMyAdmin. Make sure you have selected your local site’s database and then click on SQL.

Updating URLs in database

In phpMyAdmin’s SQL screen copy and paste this code, make sure that you replace example.com with your live site’s URL and http://localhost/mylocalsite with the local server URL of your site.

UPDATE wp_options SET option_value = replace(option_value, 'https://www.example.com', 'http://localhost/mylocalsite') WHERE option_name = 'home' OR option_name = 'siteurl';
 
UPDATE wp_posts SET post_content = replace(post_content, 'https://www.example.com', 'http://localhost/mylocalsite');
 
UPDATE wp_postmeta SET meta_value = replace(meta_value,'https://www.example.com','hhttp://localhost/mylocalsite');

This query will replace refences to your live site’s URL from database and replace it with the localhost URL.

Step 4. Update wp-config.php file

The final step is to update your local site’s wp-config.php file. This file contains WordPress settings including how to connect to your WordPress database.

Simply go to the folder where you installed WordPress on your local server and then open wp-config.php file in a text editor like Notepad.

Replace the database name with the one you created in phpMyAdmin on your localhost.

After that, replace the database username with your local MySQL username, usually it is root. If you have set a password for the MySQL user root on your localhost, then enter that password. Otherwise, leave it empty and save your changes.

/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

You can now visit your local site in a browser window by entering the URL like this:

http://localhost/mylocalsite/

Replace ‘mylocalsite’ with the name of the folder where you copied your WordPress files.

That’s all, your live WordPress site is now copied to your local server.

We hope this article helped you learn how to easily move a live WordPress site to local server. You may also want to see our guide on how to easily make a staging site for WordPress for testing, or how to move a WordPress site from local server to live site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Move a Live WordPress Site to Local Server appeared first on WPBeginner.


October 07, 2020 at 05:00PM

Tuesday, October 6, 2020

How to Find Out Who is Hosting a Certain Website (2 Ways)

Have you ever wanted to know which web hosting service any website is using?

Recently, a user asked us how to find who is hosting their website. It is a common question asked by beginners who hired someone to set up their website initially.

You might also want to find out who is hosting your competitor’s website. In this article, we’re going to show you how to find out who is hosting a certain website (using two methods).

Finding out who is hosting a certain website

Why Find Out Who is Hosting a Website?

All websites on the internet need web hosting. This is where all the files for a website are stored.

Website hosting is different than a domain name. A domain name is the address of a website, e.g. wpbeginner.com.

Finding out who is hosting a website is not that difficult because this information is publicly available.

There are several scenarios when you may need to find out the website hosting service behind a website.

  • A WordPress developer built a website for you. They forgot to tell you who the web host is, or you lost the details.
  • You set up your WordPress website a long time ago. You can’t remember who is hosting it.
  • You’ve seen a website that is fast and performs well. You want to know who the host is so you can use their services too.
  • Another website is stealing your content, and you want to send a DMCA takedown notice to their host.

There are multiple ways to find out who is hosting a website. We’ll show you the two easiest ways to quickly find out which hosting company is used by a website.

Method 1. Use the WPBeginner Theme Detector Tool

Our WordPress Theme Detector tool is a great way to detect what WordPress theme a site is using. It also tells you who is hosting a website.

To use it, simply go to the WordPress Theme Detector Tool page and type in the URL (domain name) of the site:

Type in the name of the website you want to analyze

Click on the ‘Analyze Website’ button to continue.

In just a couple of seconds, you will see details about the website. This includes the name of the hosting provider:

The theme detector results, showing the web host for a website

Here are some names you may see coming up:

  • Unified Layer: EIG (Endurance International Group) hosts these sites. EIG is the company behind Bluehost and HostGator. They also own several other smaller web hosting brands.
  • New Dream Network, LLC: DreamHost
  • Media Temple: Media Temple is a web hosting company owned by GoDaddy

In some cases, the theme detector may not be able to tell you the host. For instance, when a website is using a CDN service or a website firewall.

These services route all website traffic through their own servers which means all hosting detector tools will show them as the hosting provider.

One popular CDN service is Cloudflare. They offer a free CDN service which is used by many websites.

You may also see Sucuri, which is a website security and firewall service with their own CDN servers.

For instance, If you look up wpbeginner.com using the theme detector tool, then it will show Sucuri as the hosting provider.

The theme detector tool lists Sucuri as the host for WPBeginner

We do use Sucuri for our firewall, but WPBeginner is hosted by SiteGround.

If the theme detector isn’t giving you a clear answer, then the second method in this guide can help. It will show you how to dig deeper to find the real hosting company behind a website.

Method #2: Using WHOIS Tools to Find Who is Hosting a Website

Another way to find out a website’s host is to look at their WHOIS information. WHOIS is like a public directory. It lets you look up ‘who is’ responsible for a website.

What is Whois Information?

Most domain names on the internet are managed by a global organization called ICANN. They keep a public directory of all website data which also includes information about where a website may be hosted.

This is publicly available information, and there are many tools you can use to lookup whois information on any website on the internet.

First, you need to go to WHOis.net. Then, simply type in the URL of the website to look it up. You will see a list of information, starting with the domain name:

Looking up website details on whois.net

You just need to look for a ‘Name Server’ entry. This lets you know who is hosting the site:

Examining the nameservers listed in the whois.net data

In this case, the host is Dreamhost. To find out what web host the nameserver relates to, simply search for the nameserver on Google.

Again, you may not always be able to find out the host information. The nameservers may be set for a CDN instead, such as Cloudflare.

Other Ways to Find a Website’s Host

These methods are a little more time-consuming. However, they are worth trying if you are unable to find the host using the above quick methods.

For your own website, you could check your billing records. You have likely been billed for the hosting.

You could also contact whoever set up your website. If you aren’t able to contact them, then check through any information they have sent you in the past.

Finding out who hosts someone else’s website can be harder.

First, you could search the website for information about the web host. This might be on the About page or in the footer. For instance, the WPBeginner footer shows that our site is hosted by SiteGround:

WPBeginner hosting details shown in the footer

If you still can’t find any information, then you could contact the website owner or editor.

You will normally find a contact form on most websites that you can use to reach out. Explain that you like their website and that you wondered who is hosting it.

We hope this article helped you learn how to find out who is hosting a certain website. If you need help finding a great hosting service, then check out our guide on how to choose the best WordPress hosting service, and our comparison of the best WooCommerce hosting companies.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Find Out Who is Hosting a Certain Website (2 Ways) appeared first on WPBeginner.


October 06, 2020 at 05:00PM

Monday, October 5, 2020

How to Create a Sticky Floating Navigation Menu in WordPress

Recently, one of our users asked us how to create a sticky navigation menu for their site?

Sticky navigation menus stay on the screen as users scroll down the page. This makes the top menu always visible, which is good for user experience because it contains links to the most important sections of your website.

In this article, we’ll show you how to easily create a sticky floating navigation menu in WordPress.

Creating a sticky floating navigation menu in WordPress

What is a Sticky Floating Navigation Menu?

A sticky or floating navigation menu is one that ‘sticks’ to the top of the screen as a user scrolls down. This makes your menu visible to users at all times.

Here’s a sticky menu in action. We’re going to show you how to create a menu exactly like this for your own site:

A sticky navigation menu in action on our demo website

Why and when sticky menus can be useful?

Usually, the top navigation menu contains links to the most important sections of a website. A floating menu makes those links always visible, which saves users from scrolling back to the top. It is also proven to increase conversions.

If you run an online store, then your top navigation menu likely include links to the cart, product categories, and product search. Making this menu sticky, can help you reduce cart abandonment and increase sales.

Some of the best WordPress themes have built-in support for a sticky navigation menu. Simply see your theme settings under Themes » Customize to enable this feature.

If your theme does not have this option, then keep reading, and we’ll show you how to easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store.

Method 1: Add Your Sticky Floating Navigation Menu Using a Plugin

This is the easiest method. We recommend it for all WordPress users, particularly for beginners.

If you haven’t set up your navigation menu yet, go ahead and do that using our instructions on how to add a navigation menu in WordPress.

After that, you need to install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Sticky Menu (or Anything!) page to configure the plugin settings.

The Sticky Menu plugin's settings page

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take your mouse to the navigation menu. After that, you need to right-click and select Inspect from your browser’s menu.

Inspecting the navigation menu element on your website

This will split your browser screen, and you will be able to see the source code for your navigation menu.

You need to find a line of code that relates to your navigation, or your site header. It will look something like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

If you’re struggling to find it, bring your mouse cursor over the different lines of code in the Inspect pane. The navigation menu will be fully highlighted when you have the right line of code:

Finding the navigation menu ID using the inspect tool

In this case, our navigation menu’s CSS ID is site-navigation.

All you need to do is enter your menu’s CSS ID in the plugin settings with a hash at the start. In this case, that’s #site-navigation.

Entering the ID of the element that you want to make sticky (in this case, the navigation menu)

Don’t forget to click the ‘Save Changes’ button at the bottom of the page.

Now, go ahead and check out your sticky menu live on your WordPress website. It should stay on the page as you scroll down, like this:

Viewing the sticky menu on your website

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You only need to use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

We recommend leaving the box checked next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar, which is only visible to logged-in users.

Here, you can see that the admin bar on our test site is correctly displaying above the sticky menu:

The WordPress admin bar appears above the sticky menu

The next option allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device:

The sticky menu plugin offers further options too

You can test how your site looks on mobile devices or tablets. If you don’t like how it looks, simply add 780px for this option.

Don’t forget to click on the Save Changes button after making any changes to your options.

Method 2: Manually Add a Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. We don’t recommend it for beginners.

We also recommend that you take a look at our guide on how to easily add custom CSS to your WordPress site before you begin.

First, you need to visit Appearance » Customize to launch the WordPress theme customizer.

Adding custom CSS in WordPress theme

Next, click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Note: This will produce a navigation menu with a black background. If you want a different color, change the number next to background. For example, using background: #ffffff will give you a white menu background.

Just replace #site-navigation with the CSS ID of your navigation menu then click on the Publish button at the top of the screen.

Go ahead and visit your website to see your sticky floating navigation menu in action:

A sticky / floating navigation menu created using CSS

What if your navigation menu normally appears below the site header instead of above it? If so, this CSS code could overlap the site title and header or appear too close to it before the user scrolls:

The sticky navigation menu is slightly overlapping the site title

This can be easily adjusted by adding a margin to your header area using some additional CSS code:

.site-branding {
margin-top:60px !important;
}

Replace site-branding with the CSS class of your header area. Now, the sticky navigation menu will no longer overlap your header before the user scrolls down:

There's now room for the title below the sticky navigation menu

We hope this article helped you add a sticky floating navigation menu to your WordPress site. You may also want to see our guide on how to create a custom WordPress theme without writing any code, and our comparison of the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.


October 05, 2020 at 06:00PM