CSS - Styling A Custom Horizontal Navbar

Wiki Home Title Index

A Lesson In CSS, How to Style a List To Create a Simple Navigation Bar

Follow the steps below to add a custom styled list to a community footer or widget.

How It Works

This technique uses CSS to style an unordered list to be used as a custom navigation bar.

The Fine Print - Requirements

Admin access to your community
knowledge of CSS & HTML for advanced styling

Instructions

Copy (ctrl-c) and paste (ctrl-v) the CSS Snippet provided below into the bottom of your commmunity's Advanced Theme Editor (located in the Control Panel under THEME).
Click "Publish" to save your changes
Copy (ctrl-c) and paste (ctrl-v) the HTML Snippet provided below into the desired location, a widget or the community footer.
Click "Publish Page" to save your page or "Save" if you are inserting the HTML Snippet into the community footer.

Copy the CSS Snippet below

.ps_list_nav { margin: 0 !important; } 
.ps_list_nav li { border-left: 1px solid #ccc; display: inline-block; } 
.ps_list_nav li:first-child { border-width: 0px; } 
.ps_list_nav li a { display: block; margin: 0 7px; } 
.ps_list_nav li:first-child a { border-width: 0px; margin-left: 0; } 
.ps_list_nav li a:hover { color: inherit; }

Copy the HTML Snippet below

<ul class="ps_list_nav">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

How Does It Look?

191 views
2 versions
0 comments
1 follower

1 subscriber is following updates on this item.

Avg. Rating:
Post Date:: December 6, 2011
Posted By:: Gary Larocque
Versions:: v.2

Viewed 191 times

Customer Care

CSS - Styling A Custom Horizontal Navbar

A Lesson In CSS, How to Style a List To Create a Simple Navigation Bar

How It Works

The Fine Print - Requirements

Instructions

Copy the CSS Snippet below

Copy the HTML Snippet below

How Does It Look?

0 Comments

Customer Care

CSS - Styling A Custom Horizontal Navbar

A Lesson In CSS, How to Style a List To Create a Simple Navigation Bar

How It Works

The Fine Print - Requirements

Instructions

Copy the CSS Snippet below

Copy the HTML Snippet below

How Does It Look?

0 Comments

Would you like to comment?