Docs

[leez300]

I need to have Superfly menu to behave responsively. I can set the width at i.e. 250px, which means that the width of the menu always is static. I want to have it react on a percentual value, say 20%, so the width always matches different windows. How to?

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[leez300]

I solved this by means of a number of @media css selectors with different max-widths, like so:

@media (max-width: 1370px) {
 .sfm-pos-right #sfm-sidebar, .sfm-sidebar-slide.sfm-body-pushed #sfm-mob-navbar {
    transform: translate3d(285px, 0px, 0px);
 }
 .sfm-pos-right #sfm-sidebar .sfm-view-level-1 {
    left: auto;
    right: 285px;
    transform: translate3d(200px, 0px, 0px);
    width: 200px;
 }
 #sfm-sidebar, .sfm-sidebar-bg, #sfm-sidebar .sfm-nav, #sfm-sidebar .sfm-logo, #sfm-sidebar .sfm-social, .sfm-style-toolbar .sfm-copy {
    width: 285px;
 }
 #sfm-sidebar:not(.sfm-iconbar) .sfm-menu li > a span {
    max-width: calc(285px - 60px);
 }
}

Have a nice day!

[Joao]

Glad to hear it.

And thanks for the input for the community.

Thanks

Joao

[Author]

Posts