Title on page and category menu bars?
 

Some people express a problem with navigation on my site: http://www.theblogfarm.com/

So to assist I am thinking maybe I could add a title of sort, at least on the category menu bar, to the left of the drop down menus. Something along the lines of:

Read Articles -> Activities & Interests - Home & Family Life - Our Human Condition - The World Around Us - Writing & Book Reviews

How could I go about doing this?

Just add a custom menu item in Appearance>Menus and use CSS to make it look like it isn't a menu item. You can add a class to the menu item (I added menulabel) in the menu setting and then add something like using the proper color.
You of course could just add a div with the text you want and use CSS to position.

Ata 3.5.1

Thanks Larry but... I am not using custom menus, I am using the old category menu bar. It has been customized using html/css inserts. Is there any way to simply add plain text to the bar?

#menu2 {
border: solid 1px #4D5232 !important;
background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left;
box-shadow: 0 0 10px #333;
-moz-box-shadow: 0 0 10px #333;
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;border-radius: 5px;
}

div#menu2 ul.rMenu {
background-color: transparent;
}

div#menu2 ul.rMenu li {
background-color: transparent;
}

div#menu2 ul.rMenu li.current_page_item a:link,
div#menu2 ul.rMenu li.current_page_item a:active,
div#menu2 ul.rMenu li.current_page_item a:hover,
div#menu2 ul.rMenu li.current_page_item a:visited,

div#menu2 ul.rMenu li:hover {
background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left;
}

div#menu2 ul.rMenu li a:hover,
div#menu2 ul.rMenu li.sfhover {
background-color: transparent;
}

#menu2 .rMenu-hor a {
font-weight: bold !important;
}

.rMenu-ver, .rMenu-ver .cat-item {
margin: 3px;
background: url(/wp-content/themes/atahualpa351/images/sidebarbg03.jpg) repeat top left;
border: dashed 0px #4D5232 !important;
box-shadow: 0 0 5px #333;
-moz-border: solid 1px #4D5232;
-moz-box-shadow: 0 0 5px #333;
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
}

In that case use my second idea. Put a div just before %cat with an id and the text you want and use CSS to position and style.

God how I wish I knew how to do that... it is late and I am tired but even if I wasn't I still wouldn't know where to begin, lol.

Where do I put the div just before %cat (where is the %cat?) and how would I style it? Sorry, I know I am a pain sometimes. I try to remember the stuff I have learned from you guys but do not do it enough, so I forget... :confused:

Put the following just before %cats in ATO>Style & edit Header Area>Configure Header Area
Once it is there you will have to determine the CSS to position it properly. I can't give you the code for that as it depends on your particular situation. I use Firebug to determine what CSS I need.
The CSS would be something like the following and you would put it in the CSS Inserts box in the theme options.

Thanks again Larry, I was so tired last night but this morning I remembered where the %cat was, lol.

Hmmm, did work but stepped down the space between %page and %cat, didn't look to good... It was more or less 'between' the two and created a wide space between the page bar and cat bar. Is there any way to actually put it in the cat bar itself?

You can do most anything but the cat is generated from the %cats code and would require diving into the code that generates it to add text.

If you use absolute positioning on the example div you can just move the text where you want without moving anything else. So the code might be something like.
I added a position relative to the container ID so the menulabel id would be absolutely positioned in relation to it. The top and left dimensions are arbitrary.

You would make your life much easier if you upgraded so you could use the WordPress custom menu. You could install manually Atahualpa in a seperate folder in the themes folder so you have both versions in the theme picker and you could test out 373 and if there were any issues, just reactivate 351.

Hey Juggledad, I would love to upgrade but a couple important plugins refuse to work properly with newer version.

Thanks Larry, I will play around with it and let you know...

Check it out... you see it adds a space between page and menu bar. Any way to fix this?

I will leave it like this till you see it...

http://www.theblogfarm.com/

You still have the #menulabel set to position: relative. It should be position: absolute. You also don't have #container set to position: relative. The fonts sizes should probably be set to px instead of ems as well.

Okay, I have got it fairly on mark and it got rid of the space, thanks.

To keep things balanced (centered), how would I place the same 'Article Categories' on the other end of the bar?

Never mind, I figured that out on my own, lol. One last question, if I wanted to place an arrow image http://www.ecovote.org/sites/all/the...ange_arrow.png next to ' Article Categories' what would be the css?

You could use the CSS for a background image but you would have to put padding to allow for it or you could use the ascii code for an arrow which would be a lot easier. Here is a link to ascii codes. Perhaps 26 or 27 would work

bad link to code...

I corrected the link and you can also use the html code for arrows which would be → for a right arrow or ← for a left arrow. You will probably need to use more CSS for styling.

I used regular type arrows for now.

You guys are great... The good thing is once I have this in code somewhere I can always reference it in the future. My problem is trying to remember things I have learnt in the past. Having some sort of reference point is always good.

Let me know what you think. http://www.theblogfarm.com/

Appreciate your time and all your help Larry, a token of appreciation is on the way... thanks.

fyi it doesn't look too good in safari on the mac see
Attachment 1770

Thanks JD... Do you know any way to accomplish what I want to do that will work across all platforms? Perhaps build it directly into the bar code in some way?

On another note.. can I do the same thing using a div to position an image in the header? I would like to place an transparent .png image behind everything in the header.

Easiest way is the first suggestion, upgrade so you can use the WordPress custom menu
second choice would be to edit the theme code where it builds the menu (bfa_header_config.php) and add the text (in an <li..>...</li> pair) at the beginning and the end of the <ul> that builds the menu

One thing I would try is setting position: relative on #menu2. Then you will also need to set a z-index: 9 on the menu lables. I am not sure this will work but would make the labels be absolutely positioned in relation to the menu 2 instead of the container which MIGHT help.

Thanks guys, but this is getting too complicated for my small brain. Since I can't live with thinking it looks bad on a Mac I will just take it off for now and re-think other options.

JD, I did the upgrade on another site I have which is basically configured the same as the farm. It removed the excerpts and left nothing but the titles.

I have it enabled here: http://www.digitalcombatsoldiers.com/

It is because of a plugin for excerpt thumbnails... I am messing with it now. I will see if I can get it to work. Thanks