Hi - I have a problem in that Paul said the parent of my dropdown menu (one child) must never be a live link, for mobile to display correctly. It links to a non-existent ID on the same page, like this:
<ul class="sf-menu">
<li><a href="#gogreen">
It’s confusing, because people expect when they see the cursor-arrow turning into a finger, that if they click that, it’s a link. The only solution I can think of is to try get <li> not to light up.
The css was this:
.sf-menu li{background:#2aa048;}
.sf-menu li a:hover{background:#4cb15e;}
I tried changing it to this:
.sf-menu li{background:#2aa048;}
.sf-menu li a:hover{background:#2aa048;}
But that doesn’t work. Can you see what colors I need to change so the parent won’t light up but the child will, on hover?
The colors are this (dark, light, lighter): 2aa048,3ba953,4cb15e
I don’t see why it’s a problem that the menu headers highlight, although they are not a link, they are a clickable thing to open the sub-menu, so highlighting seems natural for them. Also, hover does not happen on touch screen, so mobile users won’t see it anyway.
But if you do want to change it, you will need more specific css selectors.
At present .sf-menu li a:hover targets all li links in the menu, you could be more specific to target only those in sub-menus.
I’m with Sam and the action of the top menu highlighting on hover is standard behaviour across all these drop down menus and I feel it would look awkward if the top menu doesn’t highlight because in a multi level menu its the highlighted item that provides the visual clue to the destination link.
You could just turn off the pointer for the top level.
Thank you Paul - that works perfectly, taking away the finger-hover. My other problem is that the last two menu items on right “Blog” and “About” don’t work in mobile. They work fine on laptop.
I thought it was the google mobile checker that was at fault but now I’ve just tested it on my iphone and they definitely don’t work. If I try click the first child in “Blog” I get taken to the first page under the previous item “Water” and ditto when I click first child under “About” - I get taken to first page under “Blog”!
Thank you! That works! And showed me a new problem
How do I get the cursor on parent to go back to a finger in mobile? It’s fine as an arrow in laptop because the dropdown auto-displays when you hover over it. But in mobile you have to click parent for child to display. As an arrow it doesn’t look like a clickable link.
Also I changed the width of the child in “Blog” and “About” way back when in the beginning of time, and I can’t recall which css line I changed it in. Can you see which it is? I’d like to delete that change since the children are all now longer than they were at the time.
Thank you! That works! And do you perhaps see a line anywhere where I told the child of .end to be narrower than all the other children? I’d like to delete that command.
.sf-menu ul {min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
Is the 8em here perhaps what I’m looking to delete? I don’t know if the 8em is yours or mine and if mine, whether it refers to the same thing as .sf-menu ul?
unless you use your nose! 