Resolved Secondary Navigation

[sheasbys 0]

I would like to add a secondary Navigation Menu in the Header region. It needs to be inside the header area and its placement at the top right.

Here are some examples:

http://www.wisergirls.org/

http://www.wfp.org/

http://www.yosemiteconservancy.org/

Can this be done? If so I have no idea where to begin. Any help is appreciated.

[basmati 4]

how about taking one "brandnav" along with a logo on the top and adding a second "nav classic" below?

[catrina 103]

I agree with basmati's suggestion. Brandnav is placed on the top right corner so you can use that.

[sheasbys 0]

Yeah, I had discovered this just before you replied. Now how to style this section. What are the CSS codes for styling this section? I looked through the docs and don't find a short list of all CSS elements.

[catrina 103]

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS). CSS that changes the style of a page element consists of two parts: the selector and the attribute.

Selector: Used to select the page element you want to change (in this case, the page element you want to change is your brandnav).

Attribute: Property that determines what kind of change you want (you’re changing the brandnav, so the attributes you want to use include link color, background color, etc.).

To find the selector for brandnav, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions: http://www.pagelines.com/wiki/Custom_CSS.

For help with the link attributes, please see these instructions: http://w3schools.com/css/css_link.asp

[sheasbys 0]

Thanks basmati & catrina for your input. I have found the w3schools link particularly useful and have it bookmarked.

I was wondering if you can change a value for an individual menu item. For example have all text to be White on a grey background except for one item that would need black text on a white background.

I have seen an example of this but can't find the website to look at how they did it. Anyone seen this before? If so any idea on how to do the same?

[sheasbys 0]

I think I'm on to a solution. Will post if it works. Any others, feel free to chime in.

Cheers,

Stephen

[Rob 547]

Stephen, yes you can select a particular menu item, but you can also create a class for each menu item in Appearance > Menus.

Click Screen Options on the top right then tick the box for CSS Classes.

When you add or edit any menu item, you'll now see where you can place a unique identifier like mymenu3a, b, c, etc. Anything you like.

Then use that CSS class you create to style the individual menu item.

[sheasbys 0]

I was trying to style the specific menu item by first finding the Menu ID and then adding specific CSS to the custom code area. This is what I tried but it hasn't worked as yet:

.nav #menu-item-76 a {color: blue;background-color: white;}

Rob, thanks for your suggestion. I will give it a try also and post my results here later.

[sheasbys 0]

Rob, thank you again. I have been able to make minor adjustments using the class selector. I need to read more to get the styling just the way I want it.

Stephen

[sheasbys 0]

OK, so I am running into a problem. I am able to effect just the background color and font weight but not the font color. Here are the steps I took:

1. Added class "donate" to the menu item I want changed.

2. This is the code I entered to define the class:

  .donate {

    display: block;

    text-decoration: none;

    color: white;

    font-weight: bold;

    background: orange;

  }

It seems that the color definition for #brandnav overrides any color I define in my class. I don't understand the problem here.

Stephen

[Danny+ 1,327]

Hi Stephen,

Can you provide a link to your website please, as when I go here - http://missionprovidence.org/

There is no BrandNav active.

[sheasbys 0]

Hi Danny,

Sorry about that. I am developing locally and also at the SA site: http://www.missionprovidence.org.za. I just updated the remote site with the same content as on the development box, still no change for font color.

Stephen

[Danny+ 1,327]

Hi Stephen,

You target the menu item like this:

.donate a {

color: white;

}[/CODE]

[sheasbys 0]

Thanks Danny, I can't believe I didn't pick that up.

You can close this topic.

[Danny+ 1,327]

The topic was marked as resolved.