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 Navigation Menu in WordPress (Beginner’s Guide)

Do you want to add navigation menus in your WordPress site? Did you know that there is a very easy drag-and-drop menu interface that allows you to create drop-down menus in WordPress. In this step by step guide, we will show you how to add… Read More »

To leave a comment please visit How to Add Navigation Menu in WordPress (Beginner’s Guide) on WPBeginner.

Do you want to add navigation menus in your WordPress site? Did you know that there is a very easy drag-and-drop menu interface that allows you to create drop-down menus in WordPress. In this step by step guide, we will show you how to add navigation menu in WordPress.

Navigation menus allow you to present a site structure to your users. They help users find information and browse through different sections of your website. Since navigation menus are so important, they are usually placed close to the header in most WordPress themes.

Navigation menus on a WordPress site

Navigation Menus in WordPress

WordPress comes with a navigation menu system that makes it quite easy for beginner users to create and manage menus. The location of the menus can vary from theme to theme. Almost all WordPress themes come with at least one menu location. Some WordPress themes come with multiple menu locations to accommodate for more complex websites.

Creating Your First Custom Navigation Menu

You can create menus in WordPress by visiting Appearance » Menus in your WordPress admin area.

Menus are located under Appearance in WordPress admin area

This will bring you to the Edit Menus screen which is divided into two columns. The column on your left has your pages, categories, and custom links tab. The column on the right is where you add and adjust menu items.

Creating menus in WordPress

Let’s create your first custom navigation menu.

Provide a name for your menu, e.g. ‘My First Menu’ and then click on the create menu button. This will expand the menu area, and it will look like this:

Newly created empty custom navigation menu in WordPress

As you can see in the screenshot, our demo site has three theme locations labeled primary, secondary, and social. The location names and placements vary from theme to theme.

Next, you need to select the pages you want to add to the menu. You can do this by selecting the pages listed on the left hand side and clicking on Add to Menu button.

Selecting and adding items to custom navigation menu in WordPress

After adding pages to the menu, select the theme location where you want to display the menu and click on the ‘Save Menu’ button.

Selecting a theme location for the menu

Don’t worry if you’re unsure where each menu location is on your site. You can visit the website to see the menu in action. If you don’t like it, then you can always change the menu location.

Preview of custom navigation menu

Arranging Items in a Custom Navigation Menu

You probably noticed that each menu item you added is arranged in the order you added them. For example, your about link appears at the end, while the contact page link appears first. Don’t worry you can easily rearrange your WordPress menu items in any order you want.

Simply drag and drop a menu item to adjust its position in the menu.

Drag and drop menu items to rearrange their position

Repeat the process to create new menus for other theme locations.

Creating Nested Drop-Down Menus in WordPress

Nested menus, also known as drop-down menus, are navigational menus with parent and child menu items. These menus are usually styled by WordPress themes in such a way that when a user takes their mouse to a parent item, all their sub-menus are displayed.

Preview of nested menu items

Creating nested menus allow you to add a properly structured navigation system to your site. Here is how you can add a menu item as a sub-menu in WordPress.

In your menu structure, drag the menu item just below the parent item. Next, slightly drag the menu item to the right. You will notice that it will automatically become a sub-menu item.

Creating nested menus with sub-menu items

You can add multiple layers of sub-items to create deeply nested navigation menus. However, it’s important to note that not all themes support multi-layer nested menus. Most do up to 2-layers.

Sub-menus with their own child menu items

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you can add your blog categories as a drop-down in your WordPress menu.

By default, WordPress provides an easier way to add pages and categories from the left-hand column on the menu editor screen.

Start by clicking on the Categories tab to expand it. You will see your blog categories listed there. Simply select the categories you want to add to the menu, and then click on add to menu button.

Adding categories to custom navigation menu in WordPress

You will notice that categories will appear as menu items under menu structure column. Just like pages, you can simply drag and drop them to arrange their position on the menu. In this example, we have dragged all categories to appear as sub-menu items under the Blog.

Adding categories to navigation menu

Here’s our tutorial on how to create a separate blog page in WordPress which is very helpful if you want to have a custom homepage for your site.

Adding Custom Links to Your WordPress Navigation Menus

While adding categories and pages is easy, what if you want to add a link to your social media profile or another location? This is when you can use the custom link option.

Simply click on the custom link tab in the left-hand column to expand it. You will notice that it only has two fields. The first one is for URL where you will need to add the actual link you want to add. The second field is labeled link text where you will add the anchor text for the link.

Adding custom links to WordPress navigation menus

Note: It’s important that you must start all links with http:// or https://. If you don’t, then the links will be broken.

Editing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress automatically uses the page title or category name as the link text. This does not mean that you cannot change it.

All menu items can be edited by simply clicking on the downward arrow next to a menu item.

Expand a menu item to edit or even remove it

Here you can change the menu’s navigational title or link text. You can also add a title attribute to the link. Don’t forget to click on the save menu button to store your changes before previewing your website.

Removing a Link From Navigation Menus in WordPress

You can remove a link in the same way you edit them. Just click on the downward arrow icon next to a menu item, and you will notice a red Remove link. When you clicking on it, the link will be removed from your navigation menus.

Removing a link from navigation menu in WordPress

Understanding Theme Locations For Your Navigation Menus

Navigation Menus are a theme feature in WordPress. Their appearance and display is controlled entirely by your WordPress theme. The admin area only provides a user interface to add and manage those menus.

Theme locations to add multiple menus

WordPress themes usually have at least one theme location for navigation menus. However, some themes may have more than one theme locations such as the theme we used while writing this article which had three theme locations primary, secondary, and a social menu.

Creating a menu to be used as secondary menu

Also it’s important to note that the names of these menu locations would also vary from theme to theme. While some may call it primary another may call it header. It’s entirely based on theme developer’s preference.

Adding Navigation Menus in Sidebars and Other Widget Ready Areas

Aside from the designated menu locations set by themes, you can also add navigation menus in your sidebar and other widget-ready areas of your theme.

For example, if you look at our founder Syed Balkhi’s website, he’s using menus to add social links and sites he like in his sidebar.

Sidebar Menus

You can add menus in your sidebars by using widgets. Simply go to Appearance » Widgets and add Custom Menu widget from the list of available widgets to a sidebar.

Adding a custom menu to a sidebar widget in WordPress

Next, you need to provide a title for the widget heading and select one of your custom menus from the select menu drop down list. Lastly, click on the save button to store your widget settings.

You can now visit your website to see your custom menu displayed in your sidebar widget.

Custom navigation menu displayed in a sidebar widget

As for social icons, some themes may come with pre-built social media icons in the menus. Alternatively, you can use a plugin like Menu Social Icons to add icons in your navigation menus.

We hope this article helped you learn how to add custom navigation menu in WordPress. You may also want to check out our guide on how to style navigation menus in WordPress and how to add image icons with navigation menus in WordPress.

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.

To leave a comment please visit How to Add Navigation Menu in WordPress (Beginner’s Guide) on WPBeginner.