Need Top Bar Navigation in Default Theme – Any Ideas?

Well, one way to do it is through widgets. This is just one way, and is based on you easily editing the info to custom create the menu so you can put anything in it. It’s a ‘simple solution’.

I might create a separate sidebar, which should probably be called a topbar in this case. Write the style for it so it displays at the top just as you might have now. Widgets can be configured to have you control the contents of more than one sidebar. So I would do that, and have it control the content of this new top bar.

Then I would manually create the contents for the topbar as a text widget. I’d just put the html in there that I want. This is very flexible, but would require knowledge of html at this point. Or you could use a links widgets. Or probably a few other ways. What’s important is that the widget system can let you control the content.

Does that make sense? Would it serve your needs?

I do something similar to this, but I don’t widgetize the process (but I might at some point). I just write the custom links into my header, and edit it when I want to add one. As this is easy for me, I haven’t found the need to make it more complicated than that. Feedback from you might answer if this is something you and others might find valuable. Or if it’s not what you want, say that too. No problem.

pages don’t have to show the sidebar. you can change the appropriate file in your theme.

Manstraw, that sounds great. Making a Widget that does that would be very popular I am sure.

I would love to know how to disable the side bar in my pages to.

Thanks for your comments, It is appreciated!

Martin

mshakeshaft, it would take some learning & time, but honestly the things you want are not that difficult. Putting tabs for a horizontal-menu in your header, is already given a tutorial in the Codex here:
https://codex.www.ads-software.com/Designing_Headers#Adding_Navigation_to_Your_Header

Also in the Default theme you could easily have the sidebar on Posts (it’s one or 2 lines of code to make sure they’re in single.php), and no sidebar in Pages (this is 1 or 2 lines of code to change in, um, i think it’s called page.php). The lines of code to look for are something about “widecolumn” and “narrowcolumn” near the top of the code, and add or remove the line of PHP concerning “get_sidebar” at the bottom.

What I’m suggesting with widgets is more about widget configuration than an actual widget.

This page explains how to widgetize a theme. At the bottom, it explains how to do more than one sidebar/set of widgets. https://automattic.com/code/widgets/themes/

Anyway, that’s the bit I’m recommending you follow to create your own second sidebar. You then use css to make it show up at the top using the link Dgold provided.

OK Dgold I am trying to work on the header.php I have pasted this code at the bottom:
You can also use the wp_list_cats() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:

<div id=”navmenu”>

• “>HOME

<?php list_cats(‘FALSE’, ”,
”, ”, TRUE, FALSE,
FALSE, TRUE, TRUE,
FALSE, , ”, ,
”, ”, ‘2,6,7,8,9,10,11,12’,
FALSE); ?>

• WORDPRESS

</div>

But I get this error:Parse error: parse error, unexpected ‘,’ in /web/sites/262/mshakeshaft/www.martinshakeshaft.com/wp-content/themes/default/header.php on line 60

Any ideas? Thanks

I have resolved the issue above and am getting very close to a navigation bar! Thanks for the links Dgold.

I have created a bar but at the moment it sits just below the header image. What I would like is for it to sit on top of the image, along the bottom.

I have would also like to get round corners in Firefox. I found this code but don’t know where to put it:
/* round corner tab – not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

The code I am using is:
##navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 1px;
padding: 3px 20px 3px 20px; color: white;
background: #ff9900;}
#navmenu ul li a:hover {color: black;
background: white; }

Thanks for the help so far!

Martin

You can use a negative margin-top to cause your menu to move up over top your header image.

I now have the header working Thanks!

glad you’re sorted!