How To Have One Navigation Header For Each Page Elementor


Elementor is an amazing website builder plugin for WordPress. Elementor makes it easy to create beautiful and high converting websites yourself without having to learn code.

  • 100% Flexible
  • No Coding Necessary
  • Thousands of Pre-Built Templates
  • Wordpress Only
We earn a commission if you make a purchase, at no additional cost to you.

Software: Elementor | Affiliate Program

How To Have One Navigation Header For Each Page Elementor

If you’re using Elementor to build your website, you might be wondering how you can have one navigation header for each page. Here’s a quick guide on how to do just that. First, create a new page in Elementor and add a Nav Menu widget to it

Then, open the Nav Menu widget settings and select the menu you want to use. Next, go to the advanced tab and add a CSS class to the widget. We’ll use the class “page-nav” for this example. Now that the Nav Menu widget is set up, we need to add a little bit of code to our CSS file

If you don’t have a CSS file, you can create one in the same directory as your Elementor pages. The code we’re going to add is this: .page-nav { display: flex; justify-content: center; } .page-nav ul { display: flex; justify-content: center; list-style-type: none; padding: 0; } .page-nav li { margin: 0 10px; } .page-nav a { text-decoration: none; } This code will make sure that our navigation header is centred on the page and that the list items are evenly spaced. Finally, save your page and you should see your new navigation header in action!

Similar Posts