How to Add Vertical Menu Bars Using Custom CSS (You Can Copy&Paste My Code)

Hey all!

In this post/video, I show you how you can make your own vertical menu bars that are extremely customizable in your ClickFunnels page using custom CSS.

Here is the code I used, simplified for your convenience. Literally just copy and paste this code into your ClickFunnels in the javascript element and you will be good to go! Just adjust the elements I have written down to your needs, or follow the video to see what you can do.


[code language=”css”]

<style>

/* Do not change these */

verticalmenu{
list-style:none;
padding:0;
margin:0;
}
verticalmenu li a{
display:block;

/* These change your text/font */

color:white;
font-family:helvetica, "times new roman", arial;
text-align:left;
font-size:20px;

/* These change your menu option bars */

width:175px;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
border-radius:25px;
margin:5px;
height:55px;
line-height:32.5px;
background:linear-gradient(to right,rgba(0,255,0,0.5),rgba(0,0,255,0.5));
}

/* These change your hovering effects */

verticalmenu li a:hover{
opacity:1;
background:linear-gradient(to right,blue,red);
text-decoration:none;
}
</style>
<verticalmenu>
<li><a href="#scroll-Home">What is this</a></li>
<li><a href="#scroll-Testimonials">Testimonials</a></li>
<li><a href="#scroll-about us">About Us</a></li>
<li><a href="#scroll-contact us">Contact Us</a></li>
<li><a href="#scroll-contact us">Order Now</a></li>
</verticalmenu><strong>[/code]

 


I did make 2 previous videos on horizontal menu bars using a navigation bar element and using buttons, but they are not as customizable as what we can do here.

In addition to what I input, you can also insert whatever properties you want and make some really cool effects!

In the next video, I will give you a similar code for a horizontal menu bar that you can use as well and customize as you see fit based on your webpage design.

That’s it!

Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

One Reply to “How to Add Vertical Menu Bars Using Custom CSS (You Can Copy&Paste My Code)”

  1. Pingback: How to Add a Navigation Bar With Page Links (Option 3) – Affiliate Marketing Essentials

Leave a Reply