Need Box Shadow or Shadow on Mega Main Menu & Sticky on Mac

Good morning!

My website is

I would like to know how to add a shadow to the bottom of my Mega Menu.

Also, I would like to know why it is not sticky on Mac? The person who assisted me in fixing it said that the menu appeared sticky on his Mac using Mavericks though I have tried it on a Mac with snow leopard and mavericks and have not seen the menu sticky, only on a PC using IE.

Thank you for your help and if you can let me know how to make the shadow and perhaps make the menu stick on all operating systems, that would be amazing!

One more quick question that I am not sure warrants its own posting:

On my front page the custom footer is appearing with a grey background, though none of the other pages of the site have this issue. I have checked the html for the custom footer as well as the settings for my theme and widget areas, and cannot find the solution to this issue.

Thank you all for your wonderful support!

Pura Vida,
Mandy

  • Patrick

    Hi there @Mandy

    I hope you had a great weekend!

    I see the sticky menu just fine on my PC in both Chrome & Firefox too. Unfortunately, I don't have any Maccy stuff to test with.

    However, 2 other support staffers just tested on their Macs and confirm that the menu does indeed stick to the top of their screens when scrolled.

    To get a shadow on the menu container, try this CSS:

    #mega_main_menu.direction-horizontal > .menu_holder.sticky_container {
    box-shadow: 0 4px 13px -3px #808080; }

    I hope this helps! And thanks for being a member :slight_smile:

  • Mandy

    Thank you, it appears to be working for me now too!

    The CSS worked and that is most helpful as well :slight_smile:

    Do you have any idea about the front page footer and why the background is grey? It is not on the other pages.

    In addition, there is a big white box on my site from the menu when it is on a mobile device. I had someone fix this on the desktop version, but it is still happening on the mobile device. Also, the alignment of the mega-menus on the mobile are off…this is also since the fix. Please help :slight_smile:

  • Mandy

    @Patrick, regarding this issue, it goes away when I turn the Canvas responsive function off, though this negatively affects other components of the site. The person who fixed the issue for me on the desktop is a plugin developer and he removed some of the css from the theme file that was causing it, though it is still happening on a mobile device.

    Y'all have access if needed. Thank you again for your help.

    One last thing, which you likely already know, is that I believe the overflow of white space that is showing up on the mobile site is being caused by the theme. When I open the menu, which is no longer out of alignment now that I made some other changes, there is a large white space to the right and that white space is covering the page when the menu is collapsed. The issue went away when I removed the mobile responsiveness from canvas temporarily, however I need canvas to be responsive for all other components of the site to work.

    Thank you @Patrick!

  • Patrick

    Hi again @Mandy

    You're very welcome for the help so far, that's what we're here for. Let's see if we can get the other issues figured out too. :slight_smile:

    The grey background in the homepage footer elements appears to be coming from some custom CSS added to your theme, or perhaps the custom CSS area of some plugin. This is the offending bit:
    body.home div.su-column-inner {none repeat scroll 0 0 rgba(50, 56, 68, 0.7);}

    Change that to this to fix it right up:
    body.home div.su-column-inner {background:transparent;}

    As for the issues with the menu and that rogue white-space, I'd need to see the actual style-sheets from your theme (there are several) so I can compare them to the default Canvas styling to help figure out what your developer may have removed inadvertently.

    Would you mind emailing a copy of your modified theme to:
    patrick(at)incsub.com

    I could then pop it onto a test site along with the default on another site to compare.

    Thanks!

  • Patrick

    Hi @Mandy

    Just popping in here to let you know I got your email with the access creds.

    That should do just fine and enable me to grab a copy of the current theme you are using right off your server so I can try to see what's what.

    I'll post again as soon as I have something to report... either positive or negative - let's keep our fingers crossed for the former. :slight_smile:

    In the meantime, some great beginner resources to learn more about CSS (as asked in your email) can be found in this article I wrote on our blog a while back:
    https://premium.wpmudev.org/blog/you-dont-need-any-coding-skills-when-working-with-wordpress/

  • Mandy

    Hi @Patrick.

    I was just checking in to see if there was any progress on this? I know that you are busy and I did not follow up/reply either.

    I have moved away from Mega Main Menu as another wonderful WPMU helper told me that it was giving my theme lots of issues. Ubermenu was recommended and I have made the change…though a bit reluctantly. I had the Mega Main Menu styles as I wanted it and now I am struggling to do the same with this new product.

    You had provided me with a box-shadow that worked on all browsers and now I am having trouble achieving the same with the new menu…that is a shadow when the menu is sticky.

    I was helped by another staff member, though the menu is not shadowed on Safari and I have not found a solution in the resources provided. I feel that I am right on the verge of being able to figure out my own CSS through inspecting the elements, though do not fully understand yet. I am doing my best to learn more and work at the same time :slight_smile:

    The CSS you gave me for Mega Main worked on all browsers. Here is what I am working with right now:

    .ubermenu-sticky #ubermenu-main-2-primary-menu{
           -moz-box-shadow: 0 5px 25px #323844;
           -webkit-box-shadow: 0 5px 25px #323844;
           box-shadow: 0 4px 13px -3px #808080;
    }

    I appreciate it! Let me know if anything ever came of our conversation above, as I am open to getting back to my old menu :slight_smile:

    You really do provide fantastic support and customer service. Thank you for being great at what you do and a good person to boot :slight_smile:

  • Patrick

    Hi again @Mandy

    I hope you are well today!

    You're very welcome for any assistance we can provide. And thank you so much for the kind words... better than coffee any day. :slight_smile:

    The Uber-Menu plugin is one that I had recommended to @Michelle Shull who I believe recommended it to you. I love the thing and the price is a real steal. :slight_smile:

    However, Safari is proving to be uncooperative. I have version 5.1.7 on my PC... that's the latest that still works on non-Maccy stuff. :slight_smile:

    I'll keep at it until I get it figured out and will post again when I do. If it takes too long, please don't hesitate to post again to remind me. :slight_smile:

  • Mandy

    Thank you Patrick!

    I mean those words. I really want to learn and to improve and the answers to the questions teach me along with fixing the issues of the site.

    I tested the box-shadow on a Mac running Mavericks and it worked, so that will have to be good enough for now :slight_smile:

    I was wondering if you could perhaps take a look at the custom CSS I have within the Ubermenu plugin on my site. It was recommended by another staffer and it works perfectly, besides on my home page. On my home page, perhaps because it uses wooslider at the top, which is part of the canvas theme, the menu overlaps the slider. It seems that on that page, the slider starts underneath the nav and not the nav container. On other pages, there is no issue as the content of the page does not start until the end of the nav container. Is there CSS I can use that is specific to just the home page?

    Thank you so much. The Uber Menu recommendation was a great one and Michelle did suggest it to me. I am about there with it!

    You all rock and I tell everyone I know in the web-world that y'all are the kindest and most effective.

    Pura Vida!

  • Patrick

    @Mandy

    That's always been my favorite way of learning new stuffs: dive in head-first, swim around aimlessly for awhile, then come up for air and ask about everything I "discovered". :slight_smile:

    The homepage header issue is caused by a bit of CSS in the theme that actually pulls it up 45px. Try adding this CSS (should snap it right into shape):
    body.full-header.full-slider #loopedSlider {margin:0;}

  • Mandy

    Thank you x's a billion! Seriously, thank you thank you thank you!

    I am digging into Tuts + and W3.org this weekend. It is time for all of this to make a bit more sense, because every time I think I understand…I don't :wink:

    I will say, I have made steps and successfully created some CSS, but it is hit or miss :slight_smile:

    I agree that diving in is the way to do it. I know that I have a ways to go but I have come a long way. I never even really intended to learn all of this but my need to understand thing is driving me. I actually enjoy this stuff though :slight_smile:

    You are a rock star. I am sorting out my responsive issue with the plugin author, as the plugin is specifically made for canvas and I should not be having these issues.

    Have a FANTASTIC day! Chat soon! Can I tag you in future posts to grab your input if you are available?

    P.S. It worked!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.