Custom Side Website Navigation Menu, HTML & WordPress
I thought I would share a small piece of code for anyone looking for an easy side website navigation menu for your websites.
WHO IS THIS FOR?
This article is more for the beginner that uses WordPress or any other site builder platform. I started building sites in straight HTML, but over the years I’ve found that WordPress is a smart choice for any small to a medium-sized business website as most clients want an easy to use interface that allows them to make edits to their site.
I don’t think there is currently a plugin to replicate this feature, so I hope this helps some of you!own updates.
Here is a link to the code you will need.
DOWNLOAD HTML & CSS CODE
Here is a link for an example of the code,
Copy HTML ul code and place into the page you want to use the side nav. I have placed 5 sections in there as a default, remove/add as needed. *NOTE: It doesn’t matter where you place the code.
Place the id tags in the top of their target sections.
Copy CSS code and place in your style.css file.
Test. I find Firefox to be the easiest browser to use for testing sites. Open the page where you have the code. You should see the side navigation on the right-hand side of the site, right click on the side navigation and then select inspect. Here you can adjust the right position field and get it nice and tight to the right side.
Once you find the right amount, go to your CSS code and update the right tag.
Go back to the page and refresh it. Press CTRL + F5 on PC and COMMAND + R for MAC.
Let me know if you have any questions, I am happy to help troubleshoot any issues.