Configuring the Navigation Bar

The Navigation Bar feature will allow you to add content below the banner, including links to pages on your blog, ads, and images.

To configure the Navigation Bar, go to Design > Content and click the pencil icon next to the Navigation Bar module to bring up the Navigation Bar Configuration menu.

There are two options for the Navigation Bar. The Simple option will allow you to enter the Title and URL for up to ten links. The Advanced option will allow you to input your own custom HTML code or code for ads, widgets, or images.

For advanced tips using Custom CSS, see the styling the navigation bar with Custom CSS article.

Simple Navigation Bar Configuration

When you first select the Simple option, the fields will be pre-populated with some links to sections of your site. These links can be edited, replaced, or removed to suit your needs. You can add additional links by filling in a Title and URL for each, clicking Save when complete.

Centering Navigation Bar with Custom CSS

The Custom CSS feature is available to Pro Unlimited and Business Class bloggers, and you can use the Custom CSS code below to center your Blog Footer.

#nav { text-align:center; } #nav ul li.nav-list-item { float: none;} #nav ul { text-align:center; } #nav ul li { text-align:center; display:inline; } #nav li a { display: inline; }

Additional Tips for Styling the Navigation Bar

We have more tips in the Styling the Navigation Bar with Custom CSS article.

Advanced Navigation Bar Configuration

The Advanced option will allow you to input your own HTML, CSS, and/or JavaScript code. When you first choose the Advanced option, you will see the default code which you can edit to use your own links, add additional code above or below those links (such as a banner ad), or replace the link code completely with your own HTML. This is especially useful for placing horizontal banner ads below your banner.

If you would like for your banner or other code to be centered, you can use the following:

<div style="text-align: center;">your code here</div>

Enabling & Disabling the Navigation Bar

To enable the Navigation Bar, check the box next to it at Design > Content and Save your changes at the bottom of the page. You can disable the Blog Footer by de-selecting it from the same page. The links or code you've entered will remain saved in the configuration and can be edited at any time by clicking the pencil icon.