Jump to content


Photo
- - - - -
Resolved

Secondary Navigation



  • Please log in to reply
15 replies to this topic

#1 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 03 October 2012 - 01:07 PM

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:

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



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

#2 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 03 October 2012 - 02:21 PM

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

#3 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 October 2012 - 03:18 PM

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

#4 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 03 October 2012 - 04:05 PM

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.

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 October 2012 - 04:41 PM

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:

Please Login or Register to see this Hidden Content



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

#6 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 03 October 2012 - 06:55 PM

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?

#7 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 03 October 2012 - 07:00 PM

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

Cheers,
Stephen

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 October 2012 - 11:25 PM

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.
  • Jean-Philippe likes this

#9 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 04 October 2012 - 04:47 AM

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.

#10 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 04 October 2012 - 06:41 AM

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

#11 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 04 October 2012 - 07:01 AM

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:

Please Login or Register to see this Hidden Content


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

Stephen

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 October 2012 - 08:14 AM

Hi Stephen,

Can you provide a link to your website please, as when I go here -

Please Login or Register to see this Hidden Content



There is no BrandNav active.

#13 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 04 October 2012 - 08:33 AM

Hi Danny,

Sorry about that. I am developing locally and also at the SA site:

Please Login or Register to see this Hidden Content

. I just updated the remote site with the same content as on the development box, still no change for font color.

Stephen

#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 October 2012 - 09:51 AM

Hi Stephen,

You target the menu item like this:


Please Login or Register to see this Hidden Content


  • Jean-Philippe and sheasbys like this

#15 sheasbys

sheasbys

    Member

  • Members
  • 14 posts
  • LocationDurban, South Africa
  • Framework Version:Framework 2.3.2

Posted 04 October 2012 - 09:58 AM

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

You can close this topic.

#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 October 2012 - 10:06 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved