How to Add Horizontal Navigation Bars Using Custom CSS (Can Copy&Paste My Code)

Hey all!

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

Here is the code I used below. Literally just copy and paste this code into your ClickFunnels in the javascript/HTML 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=”smart”]

<style>
#horizontalbar{
background-color:transparent;
height:80px;
font-size:20px;
font-family:helvetica,"times new roman", arial;
}
#horizontalbar ul{
list-style-type:none;
margin-top:0px;
padding:0;
text-align:center;
}
#horizontalbar li{
display:inline;
vertical-align:middle;
padding:10px;
}
#horizontalbar a{
vertical-align:middle;
border:solid 2px black;
border-radius:25px;
color:white;
background:linear-gradient(to right,rgba(255,0,0,0.5),rgba(0,122,122,0.5));
padding:15px 20px;
}
#horizontalbar a:hover{
opacity:1;
background:linear-gradient(to right,blue,red);
text-decoration:none;
}
</style>
<div id="horizontalbar">
<ul>
<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>
</ul>
</div>
[/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!

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 Horizontal Navigation Bars Using Custom CSS (Can Copy&Paste My Code)”

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

Leave a Reply