Genesis Simple Sidebar – Custom CSS

[jodzeee]

I need some help with CSS styling of my custom menu, please.

I created custom sidebars using the Genesis Simple Sidebars plugin. It provides a place for me to add a custom class. My custom sidebar has a custom menu in it. The menu contains pages and child pages. In the case of the children, I don't want the parent to link to anything. The way I accomplished that is using a custom link with # in the menu. Since that shows as a link, I tried just leaving it blank (which I heard may not work on mobile devices). It's still showing up as a link, there's just no href.

So I thought I could just add a custom class and color it black, remove the underline, and change the cursor to "default" to make it look like it's not a link.

Basically, what I'm trying to accomplish is having the parent act as a subhead for the child links.

I created a custom class called "menu-section-head" and put the following in my stylesheet. It almost worked, but it affects the children as well. How do I target only the one item and not the whole grouping?

.menu-section-head a {color: black; background: white;
text-decoration: none; cursor: default;
}

Sorry so long-winded ... I'm developing locally, so I can't provide a link and thought it best to try to describe in detail.

[Peter]

When you create a rule for something like ".menu-section-head a" it applies to all "a" elements beneath the ".menu-section-head" element.. so what you need to do is add the CSS class to the top level a element and target that specifically.

So your "heading" link might look something like this;

<a class="menu-section-head">Section Heading</a>

and then your CSS would look like this;

a.menu-section-head {color:#000;text-decoration:none;cursor:default;}

[jodzeee]

Ah! Thanks for the reply, I'll try that. I guess I need to learn CSS better!

In the meantime, I got it to work with this:

.menu-section-head > a:first-child
Thanks again for your help.

[Author]

Posts