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
Software: Elementor | Affiliate Program
How To Have One Navigation Header For Each Page ElementorIf 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!
![Wp Bakery Vs Elementor [2023]](https://thenomadbrad.com/wp-content/uploads/2023/03/Wp-Bakery-Vs-Elementor-768x432.png "Wp Bakery Vs Elementor [2023] 3")
