[jrhager84Participant]

Just wondering (because Superfly has RIDICULOUSLY under-documented functionality, and my submenu shows underneath the main menu after you hover over it. Just wanting to know what code to use to ‘hide’ it when the mouse (or tap) isn’t on the item.

http://www.steveslanding.com

Thanks!

[RadModerator]

Hi there,

Thanks for writing in.

Your sub-menu is on the right place and not underneath. Would you mind clarifying the issue you’re having?

Please provide some visual guide, it looks good and okay on my end and I can’t tell which one is wrong.

Thanks!

[jrhager84Participant]

Sorry – I had to custom code links in the menu via HTML to avoid the potential of it still being an issue when the establishment was open. I’ll go ahead and put it on the staging site so you can see.

http://www.joelhager.com/steveslanding

[jrhager84Participant]

I want it to work as sub-menus so the styling works on them as well. Otherwise they’re just basic a links. :/

[RadModerator]

Hi there,

It’s because of this,

#sfm-sidebar .sfm-sidebar-bg {
    background-color: rgba(0,0,0,0.7)!important;
}

The background color should be opaque. All other sub panels are behind that, and making it transparent will make other panel visible through.

Please change it into this,

#sfm-sidebar .sfm-sidebar-bg {
    background-color: #123521 !important;
}

Hope this helps.

[jrhager84Participant]

Well I know it’s because it’s semi-transparent. So there’s no way to change it to toggle display: hidden; or opacity: 0; when the :hover action is over?

[RadModerator]

Hi there,

Yes, there is no way. It has multiple layers of sub panels. Making one transparent will just display what’s behind it, and so on.

Thanks!

[jrhager84Participant]

Is there a way to style the links in the custom HTML panel of Superfly to adopt the same styling as the li items on the main menu?

[ChristopherModerator]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[jrhager84Participant]

The same hover actions and colors that are on the main menu to also appear on the links in the 2nd menu. Right now, they’re plain ol’ a links. I want the styling (with the semi-transparent animation on hover with the text color change and whatnot).

Basically copy the styling of the main menu to the drink submenu.

[ChristopherModerator]

Hi there,

Please change the style of menu under ‘style’ tab, please see the attachment.

Hope it helps..

[jrhager84Participant]

…but that doesn’t cover any of the :hover animations. It’s just basic styling. What I’m looking for is a way to style it the same as the main menu — So it responds *exactly* the same. Could I copy the styling and make it bound to a class, and then assign it? Do you know what animations those are? Superfly is so terribly-documented, I can’t find anything anywhere.

[RadModerator]

Hi there,

Hmm. The styling from main menu and sub menu are just the same, the hover effect is also the same. Example, in the main menu, hover is already green. On sub menu, the hover is also green but the background is green which is the reason why it’s not readable.

What you need is different styling since it has different background color. Example,

.sfm-menu-level-1 > li > a:hover {
  color: #000 !important;
  }

Instead of hover green, I made it black to contrast the green background.

Hope this helps.

[jrhager84Participant]

apologies Rad, that was the link to the staging site. Here is the site that has it hard-coded in the 2nd menu HTML section.

http://www.steveslanding.com

[RadModerator]

This reply has been marked as private.

[Author]

Posts