Home»Technical Help»Custom Side Website Navigation Menu, HTML & WordPress

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.

 

THE CODE

Here is a link to the code you will need.
DOWNLOAD HTML & CSS CODE

Here is a link for an example of the code,
www.thewrightzone.com/weighbridge-software/

STEP #1
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.

STEP #2
Place the id tags in the top of their target sections.

STEP #3
Copy CSS code and place in your style.css file.

STEP #4
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.

Previous post

Gmail and Yahoo Subscribers Not Showing Up In My MailChimp List Campaigns

Next post

Drawing Classes NYC - Art Classes in New York

No Comment

Leave a reply

Your email address will not be published.