Superfly and header

[GeorgiaG]

hello. I have Superfly slide in from the right. Viewing from a desktop it works great with the header but as the window gets smaller it overlaps my one active button. Is there a way to have the icon button for superfly in the header so it can maintain the right relationship with the button?

https://staging.sowinteraction.com/preview/

Thank you.

[friech]

Hi There,

Thank you for writing in, that’s tricky because the superfly toggle is position: absolute; you need to moved either the toggle or button to far left, so they don’t overlap each other.

Or use the Navigation Collapsed element (besides the button) in the header builder instead of the Superfly.

Thanks,

[GeorgiaG]

@friech

Navigation Collapsed

If I do navigation collapsed can I do two (2) columns. The client wants the links ‘exposed’ instead of hidden in submenus. Thank you.

[Prasant]

Hello @GeorgiaG,

Thanks for asking.

If you want to always display submenu item in Navigation Collapsed element then please do the following:

1. Under Navigation Collapsed > Customize > Setup > Class add a class name. For ex custom-css-menu-class.
2. Then under Pro > Theme Options > CSS add following CSS:

.custom-css-menu-class .sub-menu{  
    height: auto !important;
    display: block;
}

You have the option to change the class name as per requirement.

Here’s a screencast that you can refer.

Thanks.