How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will… Read More »

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

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

How to Create Sticky Floating Navigation Menu in WordPress

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is 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 Settings » Sticky Menu (or Anything!) page to configure plugin settings.

Sticky Menu plugin setting

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.

Inspect tool

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 like this:

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

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

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

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 can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

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

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

Don’t forget to click on the save settings button to store your changes.

You can now visit your website to see your sticky floating navigation menu in action.

Sticky menu

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

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

Adding custom CSS in WordPress theme

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    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;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

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

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

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

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.

How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will… Read More »

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

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

How to Create Sticky Floating Navigation Menu in WordPress

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is 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 Settings » Sticky Menu (or Anything!) page to configure plugin settings.

Sticky Menu plugin setting

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.

Inspect tool

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 like this:

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

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

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

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 can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

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

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

Don’t forget to click on the save settings button to store your changes.

You can now visit your website to see your sticky floating navigation menu in action.

Sticky menu

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

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

Adding custom CSS in WordPress theme

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    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;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

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

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

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

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.

How to Add Title Attribute in WordPress Navigation Menus

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we… Read More »

The post How to Add Title Attribute in WordPress Navigation Menus appeared first on WPBeginner.

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we will show you how to add title attribute in WordPress navigation menus.

How to Add the Title Attributes in WordPress Menus

Why Use Title Attribute in Menus?

Title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.

It allows you to provide additional information about the link or the image. See our guide on the difference between what’s the difference between image alt text vs title.

Title attribute displayed as a tooltip for an image

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

Having said that, let’s take a look at how to add title attribute in WordPress navigation menus.

Adding Title Attribute in WordPress Navigation Menu Items

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

Enable title attribute for navigation menus in WordPress

This will bring down a menu where you need to click on the check box next to Title Attribute option.

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

Add title attribute to the menu item

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

Don’t forget to click on the save menu button to store your changes.

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

Title displayed in tooltip

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

We hope this article helped you learn how to add title attribute in WordPress navigation menus. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

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 Add Title Attribute in WordPress Navigation Menus appeared first on WPBeginner.

How to Add Post Type Archive in WordPress Navigation Menus

Recently, one of our readers asked if it was possible to add a link to custom post type archive pages in WordPress navigation menus. An archive page in WordPress displays a list of all posts under a specific post type, category, or tag. In this… Read More »

The post How to Add Post Type Archive in WordPress Navigation Menus appeared first on WPBeginner.

Recently, one of our readers asked if it was possible to add a link to custom post type archive pages in WordPress navigation menus. An archive page in WordPress displays a list of all posts under a specific post type, category, or tag. In this article, we will show you how to add post type archive in WordPress navigation menus.

How to add custom post type archive link in navigation menus

Custom Post Type Archives in WordPress

In WordPress, the term ‘Archives’ is used for a list of entries from a post type or taxonomy (like categories and tags).

If archives are enabled for a custom post type, then you can display them on your website. Typically, the URL of your custom post type archive page is in this format:

http://example.com/post-type-slug/

Post type slug is the nice name for your custom post type.

For example, we have a custom post type called ‘Deals’, and you can view its archive page at a URL like this:

http://www.wpbeginner.com/deals/

You can place a link to the archive page of your custom post type in your site’s navigation menus. This will allow your users to see all past entries posted in that post type on a single page.

Having said that, let’s see how to add a link to your custom post type archive page in WordPress navigation menus.

Adding Link to Custom Post Type Archive page in Navigation Menus

First, you need to visit Appearance » Menus page. You will notice a tab for each of your custom post type in the left column.

Custom post type tab on navigation menus screen in WordPress

You need to click on the name of your custom post type to expand it and then click on the ‘View all’ tab.

You will see an option for your post type archives. Check the box next to it and then click on the Add to Menu button.

Your custom post type archive will now appear as a menu item in the right column.

Post type archive menu item

By default, it will use your custom post type name with the word archives for the link label.

You may want to change this into something easier. Click on the menu item to edit it and then change its navigation label.

Menu label

Don’t forget to click on the save menu button to store your changes.

You can now visit your website to see the custom post type archive link in your navigation menu.

Custom post type link in WordPress navigation menu

Just like posts and pages, you can also add a single entry from your post type to navigation menus.

Simply select an entry and then click on add to menu button.

Adding single items from a post type to navigation menus

Don’t forget to click on the save menu button to store your changes.

My Custom Post Type Doesn’t Appear on Menus Screen

Custom post types need to match some requirements in order to be displayed on Appearance » Menus page.

First you need to make sure that an archive page exists for your custom post type. Typically it is a URL like this:

http://example.com/movies/

Replace example.com with your own domain name and movies with your post type.

If you can see entries from your post type on this page, then this means your post type supports archives but does not support other requirements.

Good news is that you can still add your custom post type archive page as a custom link.

Visit Appearance » Menus page and then click on the ‘Custom Link’ tab to expand it.

Adding a post type archive link as a custom link

Enter the URL of your custom post type archive page in the URL field and add the label you want to display in the link field.

Next, click on the add to menu button, and you will notice the custom link appear in the right column.

Custom link item in navigation menu

You can now click on the save menu button to store your changes.

We hope this article helped you learn how to add post type archive in WordPress navigation menus. You may also want to see our list of 12 most useful WordPress custom post types tutorials.

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 Add Post Type Archive in WordPress Navigation Menus appeared first on WPBeginner.