Need Mega Menu tutorial

[Carol]

please take a look at the site (admin info included) and let me know how to reduce the leading space between the page links.
Also, I do NOT wish for the mega menu to dominate the page, but to enlarge just enough to contain the page links contained in the drop down menu.

A tutorial or example explanation page would be helpful!

thank you!

[Kyle – SUPPORT]

Hi

Can you confirm your link? The one in the info you provided doesn’t exist, there’s no extension

– Kyle

[Carol]

This reply has been marked as private.

[Kyle – SUPPORT]

Please see: http://swiftideas.com/documentation/#22 for instructions on how to set up the mega menu

Currently all your menu items are column headings, you need to set them as the third level items

– Kyle

[Carol]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Made some changes in your menu so you can have 3 columns. Take a look how it’s done now.

The dropdown starts where the menu item height ends.
Do you need to reduce the menu item height? Let us know so we can provide proper css.

-Rui

[Carol]

This reply has been marked as private.

[Carol]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Carol,

The custom menu item can be added with the Links section on the left of the menu admin – https://www.dropbox.com/s/jd5homa255ihvtx/Screenshot%202015-04-22%2002.48.18.png?dl=0

You can set the colour here – http://50.87.248.160/~barnwel2/wp-admin/customize.php . Go to Color – Navigation, Sub Menu Background Color

I’ve adjusted that for you, size wise – hope that’s how you’d like it. You can set that by ticking the following option: https://www.dropbox.com/s/p8tnznf4kghy9c6/Screenshot%202015-04-22%2002.52.55.png?dl=0

Hope that helps.

– Ed

[Carol]

OK, I will look at custom menu link and size link when I return from meetings this afternoon…what do I do about placement? Menu is off the page at present. Will upload screenshot.
thank you!

[Carol]

This reply has been marked as private.

[Swift Ideas – Ed]

Fixed the alignment, that is fixed for the next update too.

We advised how to edit the menu into columns, but I have set up for you. Please check the menu now and adjust as you need. There is a full guide in the documentation for how to adjust the menu.

– Ed

[Carol]

where is the documentation where I may learn how to customize the menus? I still find the drop down menu entirely too large…the documentation here

http://swiftideas.com/documentation/#22

does not indicate how to control and customize the border – white space around the columns to make them smaller and less obtrusive

I have controlled the column width to an extent within the fields provided, but the right margin is much larger than the left margin – unequal – and then would prefer both margins to be narrower

also, there are no directions as to how to manage the placement of the drop down – would prefer the drop down start under the header title and stretch to the right for one menu and the other to be centered

how to reduce space between lines/links to pages?

none of answers to those questions are in the documentation

[Swift Ideas – Ed]

Hi Carol,

None of these are covered in the documentation, as they are classed as customisations. The theme can’t provide options for every single aspect of customisation – else it would be so packed with options you would never get anywhere. These are all customisable with custom css however.

Here is some custom css you can add and adjust to your liking:

li.menu-item.sf-mega-menu>ul.sub-menu>div>li {
  padding: 10px 0;
}
li.menu-item.sf-mega-menu[data-megamenucols="2"].sf-mega-menu-natural-width>ul.sub-menu {
  width: 400px;
}
li.menu-item.sf-mega-menu[data-megamenucols="2"].sf-mega-menu-natural-width>ul.sub-menu {
  width: 600px;
}
li.menu-item.sf-mega-menu[data-megamenucols="2"]>ul.sub-menu>li, li.menu-item.sf-mega-menu[data-megamenucols="2"]>ul.sub-menu>div>li {
  width: 50%!important;
}
nav.std-menu ul.sub-menu {
  min-width: 200px!important;
}
nav.std-menu ul.sub-menu>li>a, nav.std-menu ul.sub-menu>li>div.current-language {
  padding: 10px 0;
}
li.menu-item.sf-mega-menu>ul.sub-menu>li ul, li.menu-item.sf-mega-menu>ul.sub-menu>div>li ul {
padding: 0 10px;
}

The menu items in the columns are left aligned, I can provide some css to make the center aligned to even up the spacing?

The menu alignment is set to work across all viewport sizes – if you have it as you’d like, they would very likely be cut off at smaller screen sizes.

– Ed

[Carol]

No, left aligned is what is needed…I realize I was asking to reduce the padding all around.

Here’s another thought:
If I need to re-think the design to that of a “mega menu”, how about photos next to text on each line/link/page in a sub menu with divider lines in between as in the screenshot attached? Your theme allows for an image column, but I do not see a html field for each submenu item to input text/image/link html, to allow each link to receive or display an image.

???
see screenshot

Attachments:

You must be logged in to view attached files.