If you already have a working theme, this article is for you!
The reason why some people wanted to change the menu is because they prefer a different Navigation layout, without spending another cost for a new theme, while some people has changed their preferences over time and wanted a new update of the Navigation Section Only without compromising the layout of the content and footer.
There are a couple ways to modify your website’s default Menu Navigation, wether you want it dynamic or static.
If you haven’t created a child theme yet, now is the time to create one! It doesn’t only saves you from missing design styles but also saves you from spending time and money when you update your Website Theme.
Here is another article to create a child theme before proceeding to the steps below.
1. Copy the header.php file to your child-theme.
Supposing you have twentytwenty as your parent theme and dirctojnn as your child theme.
Copy the /twentytwenty/header.php and paste it to /dirctojnn/ directory.
You will have to do the next steps in your /dirctojnn/header.php file.
2. Find the Nav Code in header.php
a. You can manually find the <nav> tag inside header.php easily.
If there are multiple navigation tags, you will have to be very careful which tag to edit.
The best way to find the Navigation Code inside your header file is to inspect the element first in the frontend.
Go to your website’s homepage > hover on the menu item > right click on it > select inspect or inspect element.
b. Find the nearest parent <nav> tag of the selected menu link.
In the example, take note of the nav class primary-menu-wrapper.
c. Find primary-menu-wrapper inside your header.php file. You the option to edit it or delete the entire <nav></nav> code.
Don’t about any mistake, you can just ctrl+z anytime or delete the file and copy header.php file from your parent-theme again as indicated in step 1.
3. Optional: Add your own class to <nav> or create a custom html + css Menu code
Here is the complete <nav> function reference for advance coding or you start adding your custom menu html + css code with this handy tutorial.
Conclusion
That’s easy as 1,2,3 right? Yay! Happy coding!
