Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Secondary Navigation

Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Hi Stephen,

You target the menu item like this:


.donate a {
color: white;
}[/CODE]

2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

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

You can close this topic.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Cheers,

Stephen

Share this post


Link to post
Share on other sites

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Stephen,

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

There is no BrandNav active.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites