Genesis Simple Sidebar – Custom CSS

Community Forums Forums Design Tips and Tricks Genesis Simple Sidebar – Custom CSS

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  jodzeee 1 year, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18404

    jodzeee
    Participant
    Post count: 128

    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.

    • This topic was modified 1 year, 2 months ago by  jodzeee.
    • This topic was modified 1 year, 2 months ago by  jodzeee.
    #21116

    Peter
    Participant
    Post count: 76

    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;}

    Website: petercoughlin.com
    Twitter: petercoughlin

    #21202

    jodzeee
    Participant
    Post count: 128

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Genesis Simple Sidebar – Custom CSS’ is closed to new replies.