wpfolio sub-menu customization question

  • I’m trying to customize the way menues and sub-menues look in with wpfolio 1.72.

    Right now, my menus are set to black text on white background, no text transform, only underline on hover when not the current menu, and set to a light gray colour when it is the current menu-item.

    However I’m running into a problem with sub-menues.

    It appears that sub-menues inherit their CSS from their parent menu, regardless of whether or not the submenu itself is selected, and I can’t figure out how to over-rule that.

    In short, how do I set individual colors and text-properties for sub-menu items, depending on whether or not the sub-menu item is currently selected or hovered over?

    Thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)

  • In your child theme’s style.css add this:

    .sf-shadow ul {
	background-color: green;
}

    And if you want to change the hover stuff, just add rules to the selector.sf-shadow ul a:hover.

    Thread Starter raakvlak

    (@raakvlak)

    @notlaura

    this code

    .sf-shadow ul {
	background-color: green;
}

    only changes the color of the shadow around the sub-menu.

    any changes to .sf-shadow ul a:hover are appear to be overwritten by something else, as they don’t do anything…

    I think there’s a :child CSS pseudo class.

    Thread Starter raakvlak

    (@raakvlak)

    What I am using right now is this

    .sf-menu {
	font-size: 1.4em;
}

div.nav {
	margin-bottom: 4em;
}

.sf-menu li a {
	padding-left: 0px;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background: white;
    outline: 0;
    text-decoration: underline;
}

div.menu-header ul li.current-menu-item a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-post-ancestor a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-menu-parent a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-post-parent a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-menu-item a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

/* deal with submenus */
div.menu-header ul li ul.sub-menu a{
	background: white;
	text-decoration: none;
}

    Which gets the menus to show up and behave as intended, except that this code makes no difference between a submenu and its parent menu item. If either the child or the parent is selected or hovered, both are styled the same way. Same goes for either being selected – parent & all child menu items are styled as if they are selected.

    All I want is the currently selected item to have an opacity of 0.2 and any item that is hovered, active or focus to have an underline. Somehow I can’t get my head around what needs changing to make that happen…

    I use CSSEdit to experiment with this kind of thing. There’s also CSS psuedoclasses that affect it, which I don’t know off the top of my head. But I would read up on “superfish” to see how this works. Sorry I can’t be more helpful, but the info is out there.

    If you want to create a post on it for the WPFolio site that would be fun. Let me know.

    This work for me in Firefox

    ‘.current-menu-item a:link{color:#FACB01 !important;}
    .current-menu-item ul li a:link:first-child{color:#ffffff !important;}’

    Thread Starter raakvlak

    (@raakvlak)

    no dice for me. if you go to https://raakvlak.net/category/art/installations/ you’ll see the entire submenu is marked as current instead of just the 1 submenu item. ??
    checked in both chrome and firefox

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wpfolio sub-menu customization question’ is closed to new replies.