Make Superfly menu fullscreen on toggle with menu-items centered

Support
#1

Hi, dear Themeco,

I am using the superfly menu and I’m loving its look already on my site

I want to take things further and make the menu items centered and the superfly background fullscreen

How would I achieve that?

Thanks

#2

Hi Wilfried,

Please consider that this is a customization request for the bundled plugin and it is outside of our support scope. We will do our best to give you the correct information and methods to do the customization but we will not be able to implement the changes for you.

To make the menu items in the SuperFly menu centered you need to add the CSS code below to X > Theme Options > CSS:

body #sfm-sidebar .sfm-menu li a {
    display: block;
    margin: auto;
    text-align: center;
    padding-left: 0 !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

I am not sure what are you talking about the background. Would you please give us the URL of your website which you have a background in the SuperFly and give us more detailed information on how you want it to be?

Thank you.

1 Like
#3

http://demo.wmmajaliwa.com/ Is the link to my site

But I want it to stretch out and almost have the same feel as it is in this site
http://bowandarrow.com/ when you click the button icon on the top right

#4

Hi Wilfried,

Ah I see what you mean, You want the Full Screen mode like this SuperFly Demo:

You need to set the design mode of the SuperFly to Full Screen:

As you plan to use that menu plugin I strongly suggest that you take time and read more about it. So for your specific question just read this article:

http://superfly.looks-awesome.com/docs/Getting_Started/Creating_Your_First_Menu

But in general, I suggest that you check the article below and the ones that article links to:

Thank you.

1 Like
#5

This support is amazing

Thanks Christopher, I’m trying what you have suggested

#6

Yup, works like a charm

But

If you don’t mind, how can I change the color on hover to say, orange?

this code doesn’t produce desired results

    #sfm-sidebar > div.sfm-scroll-wrapper > div > nav > div > ul > li:hover > a {
    color: black !important;
background-color:#FFC11B !important;
}
#7

Hi There,

To change the text color to black & the background to orange, please try with this custom CSS:

#sfm-sidebar .sfm-menu li:hover > a {
    color: black !important;
}
#sfm-sidebar .sfm-menu li > a:before {
    background-color:#FFC11B !important;
}

Hope it helps :slight_smile:

1 Like
#8

Thai, you, my friend are an incredible genius

Works like a charm, loving it

Thank you

Appreciating the support

Lots of love

#9

How do I adjust the font-size for only mobile devices?
It’s quite big, I want to tone it down

#10

Hi There,

This custom CSS will reduce the size of menu items to 34px on screen size 480px and below:

@media (max-width: 480px){
    #sfm-sidebar .sfm-menu li a {
        font-size: 34px !important;
        line-height: 110px !important;
    }
}

Let us know if it works for you.

1 Like
#11

What will I do without you, Thai?

Thank you

Works Like A Charm

#12

You’re welcome!
Thanks for letting us know that it has worked for you.

#13

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