After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back to your Homepage is by clicking on the Header. The easy workaround is to place all your navigation links in your sidebar by using the “Pages” widget. My opinion is it it would be better to have the navigation links just below or above the Header.
To have all the pges displayed horizontally in the Header area, you will first need to decide how you want the links to look. Normally a simple link will have the same fonts and colors with the overall layout. In this case, since we are placing the links within the header, we will want the fonts to be white with no default background colors, The background color when the mouse is hovered on the link is a darker shade of blue.
In order to achieve this, we first have to declare all the attributes that we want in the stylesheet. The complete set of CSS codes will look like this.
/*Top Navigation */
#nav { background:none; width:760px; height: 25px; float: left; margin-top: 20px; }
#nav ul { list-style: none; }
#nav li { float: left; }
#nav li a, #nav li a:visited { display: block; padding: 0 10px 0 5px; line-height:2.5em; color: #fff; text-decoration: none; font-size: 1.2em; text-transform: lowercase;float: left; }
#nav li a:hover { color: #222; background:#0AB5C9; text-decoration: none; }
/*End Top navigation */
It is always good practice to include a comment before and after any codes you add so the you will know what those codes are for. Just wrap those statements within these symblos /#….#/ and WordPress will not read those lines.
The size, colors and backgrounds can be changed to your preferences here.
Now that you have what you want in the stylesheet, it is time to make it appear in your header. Open your header php file. Look for the codes that calls up the header banner. In the Kubrik Theme it is written as such.
<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
Immediately AFTER those codes insert these codes to call up the navigation links.
<div id="nav">
<ul>
<li><a class="blog" href="<?php bloginfo('url'); ?>">home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
</ul>
</div>
These codes cam also be used in amy WordPress Themes that do not have horizontal navigation links. The tricky part might be positioning the links. Most of the time, it will be trial and error.
Hi, your tutorial is great! It is easy to follow! But is it possible that you also can tell how to add a dropdown menu to the navigation bar with the child pages?
Hi Doris,
That”s quite technical, but you can find the info at the WordPress codex or if you Google for it.