Mega Menu and parallax images and gizmo icons

[jansthh]

Hello,

I’m new to Dante and have some questions:

1) how can I set up columns in the mega menu like in your demo? On my drafted client-site (http://www.webigami.de/saidiapharma), he uses only one column although I have 9 menu items below the main menu. And what is the difference between “Matural Width Mega Menu” and “Alternative Style Mega Menu”?

2) my background parallax images get zoomed by the theme way too much from a certain browser width and look very bad/pixelated. How can I change that?

3) is there a shortcode overview for gizmo-icons like for font awesome icons (on their webpage)? It’s a hassle if I wanne change the icon and don’t know the code…

Thank you very much,
Jan 🙂

[Kyle – SUPPORT]

Hi

1) To set up a mega menu see: http://dante.swiftideas.net/documentation/#menus
I have attached 2 screenshots showing you both the natural width mega menu and the alternative style mega menu (one under shortcodes)

2) What size are your background images? Unfortunately there is nothing you can do about the zoom, unless you want your images to cut off and leave white space, which will not look very good.

3) Yes it is in the theme documentation which you can find in your download files or here: http://dante.swiftideas.net/documentation/gizmo/

– Kyle

[jansthh]

Hi Kyle,

thank you very much for your help. It all worked out pretty well.

Some more things:

– I’m using the animated content box which flips on mouse hover. I’d like to keep the flipping but remove the “bouncing” in the end. It’s too much and not professional enough for my client. Can you send me some Quick CSS for that?

– same with the logo on google maps. It appears from the top and bounces back after “landing”

– can I insert a parallax image without text/content in it? When I remove it, the demo text appears automatically

Thank you and cheers,
Jan 🙂

[Kyle – SUPPORT]

Hi

For the service box add this custom css:

.sf-icon-box-animated .inner {
  transition: all 500ms cubic-bezier(-.01, .01, .99, 1.01) 0s !important;
}

For the map, I don’t think it’s possible to change the pin transition.

Add extra class to the parallax asset ‘no-text’ then add this css to your custom css:

 .no-text {
text-indent: -9999px;
}

Let me know if this works.

– Kyle

[jansthh]

Hi Kyle,

thank you so much for the quick help! 🙂

I added the code to quick css but the boxes are still bouncing:

http://webigami.de/saidiapharma/services/

Any ideas?!

Cheers,
Jan

[Kyle – SUPPORT]

Hi

Are you sure you added the css? Where did you put it?

– Kyle

[Kyle – SUPPORT]

Please clear your cache, it should then work 🙂 I just checked.

– Kyle

[jansthh]

Theme Options. Custom CSS.

Please see the screenshot:

http://webigami.de/saidiapharma/wp-content/uploads/2014/02/Bildschirmfoto-2014-03-07-um-10.53.46.png

[Kyle – SUPPORT]

Please see above 🙂

[Kyle – SUPPORT]

You can actually replace it with:

.sf-icon-box-animated .inner {
  transition: all 500ms ease 0s !important;
}

– Kyle

[jansthh]

NOW it’s working (with the new code).

Much smoother. Cool!!

Thank you 🙂

[Kyle – SUPPORT]

No problem! 🙂

[jansthh]

One more thing:

How can I reduce the height of the fancy header? It takes too much space for my client’s taste.

Thank you,
Jan

[Kyle – SUPPORT]

Try adding this custom css:

.page-heading.fancy-heading {
  padding-bottom: 60px !important;
  padding-top: 205px !important;
}

– Kyle

[jansthh]

Perfect! Thank you, Kyle!

Cheers form sunny Hamburg,
Jan 🙂