Menu placement on vertical superfly menu

Hi there

I have a side menu which I want to look like Integrity 8 demo menu ie Logo at the top then menu items not far beneath it. At the moment I have the logo at the top and the menu items start way down the page. I want to move them up a bit. I have looked all over superfly and cannot find a way to do this.

I tried the css suggested by superfly documentation but all that does is bring down the logo and put the menu directly under it and it all looks a bit odd.

Please could you advise how you did it in integrity 8.

Many thanks.

Hey @Jimmmmmer,

The Integrity 8 demo uses Fixed Left Navbar Postion. You can set it up in Appearance > Theme Options > Header.

Please note that this layout is fixed and there is no option for slide open effect like Superfly.

Also, Superfly’s menu design is predesigned. There’s no styling options for it and modifying it with CSS is outside the scope of our support because it involves complex coding.

Thanks.

Hi Sorry

I think maybe I did not make myself clear. I want to use superfly vertical menu which will be on the right BUT I want it to look like the integrity 8 one

IE. The logo at the top and the menu items underneath with just a small space between the logo and the start of the menu. At the moment the gap between the menu and the logo is far to big and pushes the menu items down the page.

Thanks.

Kind regards

Hi There,

Please add the following code to Theme Options CSS

#sfm-sidebar .sfm-va-middle {
    vertical-align: inherit;
    padding-top: 140px;
}

Hope it helps

Joao

Thank you so much - its perfect.

Kind regards

Glad to hear it.

Cheers!

Joao

Is there a way of just having the first word of the menu item as a capital rather than all the words as capitals.

ie

Instead of: What We Do

Should be: What we do

There only seems to be an option to have all capitals or the first letter of every word as a capital.

Many thanks for your help.

Kind regards

Hi there,

Superfly only has the option for the text to be capitalize or set to uppercase.

You may add this code in the custom CSS to override it:

#sfm-sidebar .sfm-menu li a {
    text-transform: none !important;
}

Hope this helps.

Hi That works perfect thank you.

Hi Joao

The menu height working great on desktop but too low down on other screens like ipad and iphone. Do I need to put different for those.

Many thanks.

Hi There,

Please try replacing:

#sfm-sidebar .sfm-va-middle {
    vertical-align: inherit;
    padding-top: 140px;
}

with:

@media(min-width: 969px) {
#sfm-sidebar .sfm-va-middle {
    vertical-align: inherit;
    padding-top: 140px;
}}

Hope it helps

Works perfect - thank you for your help.

Kind regards

You’re most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.