Superfly Line Height

Can you give me the CSS to reduce the line height (reduce the space between) the menu items in the Superfly menu please.

Hi there,

You can set top and bottom padding value in Superfly Settings/MENU ITEMS/Customizing items/PADDING OF MENU ITEM without using CSS.

If you still need help kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Yes. How can I change the font type, color, and line-height of the Copyright text area please.

Hi there,

To change those characteristics you will need to add a CSS code below to Pro > Theme Options > CSS:

.sfm-widget p {
    font-family: sans-serif;
    margin: 0 0 20px 0;
    color: #ff00ff;
}

Please change sans-serif to the name of the font you want. Also, you can change the color code and the margin pixel to fine tune the copyright text in the Superfly menu.

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

Thank you.

Thank you for the videos. This one is beyond me though. See attached. How can I make this little white sliver at the bottom transparent?

http://retro.piexec.biz/

Hi piexec,

I’ve checked your website and I can see this white area is now transparent:

Did you manage to get it as you like?

Thanks.

Could you possible give me css to make the social icons and disclaimer to move up just under the last menu item in the primary nav? I don’t like it all the way at the bottom like this.

Hey There,

To move up the position of the social icons, please find this custom css block in the custom css section:

#sfm-sidebar.sfm-compact .sfm-nav {
	min-height: 50vh;
	height: auto;
	max-height: none;
	margin-top: 0px;
}

min-height: 50vh; must be reduced to at least 30vh.

We would loved to know if this has work for you. Thank you.

Hmmm. Really didn’t change much of anything. See attached for what I’m trying to accomplish.

Hello There,

It is still 50vh.

Please update the code and use this instead:

#sfm-sidebar.sfm-compact .sfm-nav {
	min-height: 220px;
	height: auto;
	max-height: none;
	margin-top: 0px;
}

Hope this helps. Kindly let us know.

That worked for the social icons, now I just need the disclaimer text to move up too please. Thanks!

Hi there,

unfortunately, it is not possible to do so as the menu section and social section are on the same level and the menu section is taking up the whole height:

The absolute positioning of the social and the copyright text is causing that section to stick to the bottom, but we never can force them to go under the menus as the height of the menu section is long as you can see in the screenshot.

Now one way is to force the height of the menu section to be small, but that might indeed have side effects which we do not recommend to do so.

I suggest that you add the icons to the menu items. You can do that following the steps below:

http://superfly.looks-awesome.com/docs/Customize/Upload_Your_Icons

Also, add the copyright text as a menu item and link it to #

Then if you get back to us we may be able to help you better regarding the CSS to make all the icons go in horizontal mode rather than vertical.

Thank you.

No problem.

Could you give me CSS to make the Map on the homepage a Circle with a Double Line Border of 10px in #fff?

Hi there,

Please add this as well,

.wpgmza_map {
    border-radius: 100% !important;
    border: 20px double #fff !important;
}

Thanks!

Awesome Sauce! Worked great.

Also, can you help me on my Global block:

  1. Change the Z index on the section top so it doesn’t cover my lady image.
  2. On Tablet size and below, move the Lady Column to the bottom, and the Contact Column to the top

Thanks in advance.

Hey @piexec,

  1. Increase the z-index of the row containing your image to 10.

  1. Use this CSS:
@media (max-width: 1214px) {
    .e110-4.x-image { /* Lady Image */
        display: none;
    }
    .e110-5.x-column { /* Contact Column */
        width: 100%;
    }
    .e110-2.x-container { /* Row containing the lady image and the contact column */
        padding-bottom: 80%;
        background: url(http://retro.piexec.biz/wp-content/uploads/2018/04/retrogal.png) no-repeat center bottom;
        background-size: 80%;
    }
}

See how it works here.

Just note that I’m using the dynamic classes in that CSS like e110-2. That might change in case you add content to your section. It would be best to change those to your own class.

If you have more questions, please open a separate thread because long threads often lead to confusion.

Hope that helps.

Worked Perfect!

Thanks for letting us know that it has worked for you.

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