Mega Menu setup help

General questions pertaining to how certain issues can be resolved. This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.
Forum rules
This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.

1. No offensive language and no mocking
2. Please do a thorough search before you post something. Trust us, there is a high probability that the question you are asking has been asked previously.
3. No soliciting. You cannot post here soliciting bids for people offer you quotes, or even offer money to people for some work. You will be moderated if you do so. If you are looking for help, please post your request on http://jobs.wordpress.net or http://codepoet.com
4. Please be reasonable. You are getting software and support. For free. Complicated requests from a general purpose theme are not welcome and some volunteers might lose patience with you.
5. Please do your due diligence. If you posted a query and we answered with a link, take the trouble to go through the link contents.
6. Please post with complete information. Requests for help MUST be accompanied with your URL, particularly if you are asking something like "Why am I seeing a blank space?"
jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Mega Menu setup help

Post by jumpqbert » 17 Jul 2013, 08:55

Hi,
Sorry I need help on this... I've been studying the other posts on mega menu setup and I'm still not getting it completely.
Here is my url again: http://www.uintalibrary.org/wp/

Right now I am not using the mega menu widget(s) as far as I understand. This is just a simple menu that's displayed with one parent item (digital materials) and 4 custom links nested underneath. The fact that I got it to display at all is cause for celebration, wahoo!!

Let me post here a link to the page where my inspiration is. This is really how I would like to have *my* mega menu work, and I would like to either use the built-in suffusion mega menu widgets or the jQuery Mega Menu:
http://tscpl.org/

So, When you click an item in the mega menu, the goal is, to have it slide down the full width of the page (or in my website, even just the main container below the header). the tscpl.org site also has a close link at the bottom of the menu and it will stay open until you close it. And, they have all number of wonderful things inside their menu panes.

Can someone point me to a set of steps to get my existing page to use either the built-in mega menu or the jQuery plugin so that my page mega menu functions like the tscpl.org mega menu?

Thanks,
jumpqbert

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 19 Jul 2013, 09:57

Thanks to everyone for your interest, however let me be more specific and perhaps someone can answer this for me.

I am re-examining every bit of info I can find in this forum about mega menus in an effort to solve my own problem. On this page http://aquoid.com/news/2012/02/suffusion-version-4-0-0/
if I read slowly and carefully, after doing the steps in order, I get stuck on: "iii. Then go to Appearance → Widgets and add widgets to the Widget Area you just selected."

What widgets do I add??? I get the drag and drop thing in the widgets area, but what widgets? Do I drag in the jQuery mega menu widget? Because I have assigned the Suffusion mega menu areas 1-9 to each of my 9 main menu areas, do I have to drag the jQuery mega menu widget into each of those 9 Suffusion mega menu areas?

Thanks,
jumpqbert

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 19 Jul 2013, 10:57

ok, I did try doing the above, I tried giving each of my main menu top categories mega menu areas. then I inserted the jquery mega menu widget in each of those mega menu areas in the widgets screen.

wow, ok, that wasn't it.

now I'm going to try breaking my main menu into pieces, and then I will see if I can use the jQuery with each of the pieces within the mega menu widget areas.

<<time passes while I work on the above...>>

Nope. Breaking the main menu up in individual pieces for the jQuery mega menu widget within each Suffusion mega menu did *not* do anything.

So I reversed all that, told it to not display the main menu as a menu under the header (both boxes blank in the Menu area on the l.h. side), then went into widgets and dragged the jQuery mega menu widget into the "Area Below the Header" and set that to my main menu. Refresh the page and it does show the jQuery mega menu. The drop downs do not function as needed... will play with that. And, the menu sections are cumulatively too big in width; even on my 19" diagonal monitor the page breaks the jQuery mega menu into 2 rows. No joy.

No joy. Anyone? Am I the only person on the planet that is having no success trying to get a functional mega menu put into place?

p.s. Don't get me wrong, I am loving Suffusion. Sayontan Sinha has done an awesome job! Thanks Sayontan!

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 22 Jul 2013, 15:25

Yes. The picture at the bottom of this page, the menu with the black background that fills the width of the main space. This is what I am after! Otherwise, I would like it to slide down/shove the rest of the page downward instead of overlap the main space content when a user clicks a menu item.

http://aquoid.com/news/themes/suffusion ... -and-mega/

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: Mega Menu setup help

Post by Colin » 22 Jul 2013, 22:30

I am just starting to play with mega menus and am going through some of the same issues as you.

The Suffusion in-built mega menus do not do the slide-down. The inbuilt is a drop down that contains multiple column links that overlays the page and does not push it down. You can style this Suffusion dropdown with Custom CSS.

The push the page down will have to come from a plug-in like you have already found.

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 23 Jul 2013, 08:15

Thanks for that Colin :)

I found another helpful friendly soul over here that actually just created a tutorial (with pictures even!):

http://mbrsolution.com/tutorial/suffusi ... torial.php

I'm going to take your comments along with this new tutorial and try today to get my mega menu going the way I want it to. I will share any results here because this is such an important function.

Cheers, and good luck!

jumpqbert

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 23 Jul 2013, 12:37

Ok, I played with the settings for most of today. I must admit that I was hopeful to see the tutorial I posted in my previous link gain me a working Suffusion mega menu, and admittedly it did kinda work... the menu headings were all out of order, the items that had drop-downs weren't all there (why I have no idea) and there was a Home page link and a home icon... the drop-downs floated down on top without pushing the page down, but I expected that.

Originally, our inspiration page included the look of the jQuery mega menu, and since it boasts a full-width slide-down option on the drop-downs, I decided that if I can get that to go all I will need to do is get it to push the rest of the page down instead of slide down over the top of the page.

So I backed out of all the uses of the Suffusion-included mega menus. Not to say I didn't try, and the tutorial was a big eye-opener, so... glad for the side-trip anyhow.

I kept the jQuery mega menu in the Widget area below the header. I tweaked the css on my child theme a little bit to shrink some of the margins/padding to bring the header, the widget area with the menu, and the main page area closer together. As of yet I am still searching for the css that will change the background on the widget area below the header from black to white.

On the jQuery mega menu developer's faq page, http://www.designchemical.com/blog/inde ... t-be-seen/ , I found a mention about changing all instances of overflow:hidden; to overflow:visible; so I used a text editor to scan through a copy of the parent style.css to pluck all those out, change them to overflow:visible;, and I inserted just those into the style.css of my child theme. That helped a lot, I hope it didn't break other things, but I figure if I run into something that breaks because I made it overflow:visible; all I have to do is selectively and carefully remove the changed entry/entries from my child theme style.css and let the parent Suffusion style.css take it back over. On the same page [www.designchemical.com] linked above, there is a reference to an edit in the functions.php file so that the jQuery of other plugins does not interfere with the jQuery of the mega menu: "This will ensure that WordPress only loads jQuery once and in the correct location. If there are no plugins installed that use jQuery WordPress will still load the library as part of your theme files" It is an enqueue_script. Well, I'm no php expert, yet... I put a copy of the functions.php file into my child theme (copy of parent file) and added that code snippet from the above page. No bueno. Broke my wordpress dashboard. So, I probably did that part wrong, inserting somewhere I should not have, or perhaps redundant code in both files caused that to crash... to get my dashboard back, all I did was go into My Computer, browse to the directory where my wordpress is installed on the server, and delete the just-added functions.php file out of my child theme folder. And voila, my dashboard is back after a browser refresh.

At this point, here are the things I need to change: http://www.uintalibrary.org/wp/
1. change widget area below header background from black to white, remove padding and border.
2. remove border from main page area, right now it's a tiny grey line...
3. reduce the white space between the widget area below the header and the main page area
4. reduce the padding of the buttons in the mega menu because currently I have a button that overflows onto a second row (Support Us), need to snug that up and have all main header buttons on the same row.
5. right now my drop-downs in the mega menu are about 158 px wide. I need to change that to allow them to fill the width of the main page area.
6. figure out how to force the remainder of the page down as the drop-down moves down on the page.
7. oh yeah. click one of my drop-down items. see all those blue bullets on top of arrows? ugly ugly ugly. must remove those.

If anyone can help with my to-do list here, I sure appreciate it and if I can help anyone else in return it's just a good thing :)
Thanks,
jumpqbert

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 23 Jul 2013, 13:58

as per my to-do list, I was able to add this code to back end-custom includes and now in the drop-downs I only have the little arrows by the submenu items... so I think that is ok for now. I would like to know what the control is for the little arrows themselves, in case someone wants to change them later ;)

#horizontal-outer-widgets-1 ul li {background-image: none;}

btw, I did add two other posts before this one, and I'm not seeing them yet they said they posted successfully... if they don't show up by tomorrow I will try to reiterate my to-do list. Hope those show up because they give details on my progress forward today.

thanks,
jumpqbert

jumpqbert
Posts: 17
Joined: 16 Jul 2013, 11:13

Re: Mega Menu setup help

Post by jumpqbert » 24 Jul 2013, 07:43

found this post regarding my to-do list item #1:

"Re: Setting individual widget background colour
Postby Colin » 13 Feb 2013, 09:53

Try setting the background color of the #text-2 element rather than the outer widget."

Colin, I combed through the parent style.css and did not find this. I added #text-2 {background-color:#FFFFFF} to Back-end --> Custom Includes and it did nothing. I also added it to my child style.css file and it did nothing. The background color on the widget area below the header remains black, and I want it to be white with no border.

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: Mega Menu setup help

Post by drake » 24 Jul 2013, 08:07

WordPress assign for each widget an unique CSS ID, based on the type of widget and the chronological order of definition of widgets. In your case, the right element is #dc_jqmegamenu_widget-13. So, try to add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles, without altering any css file:

Code: Select all

#dc_jqmegamenu_widget-13 {background:none;border:none;}

Locked