Targeting active top menu level on foundation topbar


(webcore) #1

Hello,
I’m trying to target the active menu state of the top level menu of a foundation topbar to customise it (rather than use the active style colour setting available in the topbar options).
I want to use just a border-bottom to highlight it (the active top level only - not the dropdown items), but i’m having trouble targeting it. Any suggestions on how can i accomplish this via css?

Thanks.


(Andrew Tavernor) #2

The active menu item simply has the class active added to its <li>

so
.top-bar-section ul li.active{ border-bottom: 1px solid red; }

Would do a simple, but unattractive job. The trouble is that you are targeting the whole width of the element and not just the text, plus the underline will be at the very bottom of the bar and thus not stand out well.

You have two options to do it more attractively

Use the TopBar Surgeon Menu stack which will generate the CSS for you (which you can then copy out an use in site-wide styles, or just leave the stack on the page - see the detailed instructions doc which also tells you about the structure of TopBar and how to style various aspects of it. The stack and instructions are here

or… Go completely manual. I did a blog post on how to style a TopBar expanding underline, you don’t need to use the expanding effect if you don’t want to, but it deals with just applying the underline to the text rather the bottom of the <li> There is a link at the bottom to a project file with all the CSS for the bar effects in the page inspector. If you chew through that you will find out a lot about TopBar. This is the post http://bigwhiteduck.typed.com/blog/topbar-css-2


(webcore) #3

Thank you Andrew. One of the issues i was having was that the bottom border was adding height to the topbar. I see know that using a pseudo-element i can overcome this. However there’s another issue with the css you are suggesting. It’s targeting both the top level active menu AND the active dropdown menu item. My goal was to target just the top level menu, not the dropdown items. This is my biggest problem.
I can target the active top level menu for items that have a dropdown using this code:

.top-bar-section .active.has-dropdown>a {
background-color: red !important;

However it doesn’t target active top menu items that don’t have dropdown menu.
How can i solve this one? It’s driving me crazy.

PS: Thank you for the links and project file. I have some homework to do now to create the bottom border correctly.


(Andrew Tavernor) #4

That demo was in response to a user request who wanted to replicate the original Pandora website, where all the menu items where targeted with the effect.

In order to just target top level menus you firstly need to specify only direct decedents in your selector using the > direct descendent selector.

So something like

.top-bar-section>ul>li.active>a { background-color: red !important }

will only target the list items that are direct decedents (top level) of the first level child <ul> within the <section class="top-bar-section">

You do not need to use the .dropdown class at all if you want it to affect all items.

There is a little more info about the direct dependent selector in relation to TopBar menus here: http://bigwhiteduck.typed.com/blog/topbar-dropdown-transition


(webcore) #5

Geez! you make this seem so easy. I’ve lost so much time trying to figure that out (without success) that’s embarrassing.
I do like a lot of the effect in Pandora example which i will now try to replicate on my top menu just for learning sake, but i can’t get much from the CSS code used in the RW6 file. It’s confusing. I will try use the CodePen example you provided in the article and see how things go from there.

Thanks for your patience and help references. I’m not yet that confident that i can do it at this point (still learning CSS) but i will work on this.


(Andrew Tavernor) #7

The codepen does of course just use a general un-ordered list and not the specific foundation classes used by TopBar.

If there are any aspects of the Pandora topbar code that you need to be explained specifically just ask.

The other thing I would say is that with all things CSS, the browser inspector is your best friend. If you are unsure of how to target an element just right click on it and select inspect element. The styles applied to it are shown in the right hand pane and nine times out of ten you can easily work out what you should be doing or why your code is not working.

CSS itself is very easy, the difficulty only comes with the complexity of any given structure. Once you get a picture in your head of how a particular element or group of elements is behaving then it will become a lot easier.


(webcore) #8

Yes, i’ve been using it to help me customise a couple stacks and i was going fine until i’ve tried to change the topbar.
The topbar is a nightmare! I’m not going to customise it for this project.

Instead i decided to create a new one (without dropdowns) from scratch in an empty document and i’m trying to target some specific use cases to understand what’s going on. Even this doesn’t seems easy. For example how do i target just the second item on a five items menu (to use a different hover colour or something)?!
Seems a simple thing but i can’t do it yet. Probably i have to add a specific class to the corresponding page in the source list where the pages are located… still looking into this one.


(Andrew Tavernor) #9

See this post where I describe how to target a particular menu item using the nth-of-type selector


(webcore) #10

“If there are any aspects of the Pandora topbar code that you need to be explained specifically just ask.”

Thank you. I will.

So much useful info. Thanks for pointing this out too. It’s tremendously useful :slightly_smiling: