Menu isn't sticky!

I checked your page, and there is no element anywhere with the ID “main-menu”, so selecting #main-menu in the plugin’s settings won’t do anything (the error message in the browser console also says “There are no elements with the selector/class/ID you selected for the sticky element (“#main-menu”).“).

It’s easy to solve though! Just enter #nav-container as the element in the settings, that should work.

Hope this helps!

Thank you, thank you!!

Don’t know where I saw #main-menu???

It works perfectly now – you rock!!

: )

Me again!

We have tweaked the formatting of the page and now, after this change, the stickiness is GONE! : (

Previously, we used a full-width format – now we have a “box” format. Is this part of the problem?

We still have #nav-container configured as the element.

Thanks for any tips or help!

https://ncmc-draft.dreamhosters.com/

It looks like you changed themes? The theme you’re currently using doesn’t have an element #nav-container. For this theme, you probably need to select #navigation.

It’s the same theme – just a different format (box versus full-width)

When I entered #navigation into the Sticky Plugin settings — it completely messed up the top header area. The header image no longer displayed and there was a large blank space. Could there be another element to try?

P.S.

We are using Canvas theme, from WooThemes. I tried .main-menu (which is what we named that menu that runs across the page) and that didn’t work either.

.main-menu won’t work because there is no element on the page with that class (see the error message in your browser console).

While I’m curious what choosing #navigation messed up, and how, I can’t say what the best element to choose would be, but you could try these:

nav.col-full
section.menus

Hello! Here is how the page looks if I enter #navigation into the plugin settings – very strange!

https://ncmc-draft.dreamhosters.com/wp-content/uploads/2016/05/sticky-plugin-screen.jpg

That’s super weird….. Does it look like that when you try any of the suggestions I made above?

Is there any way you could show it to me “live” instead of a screenshot, so I can see why it might be doing that?

You mean provide you with a login?

I did try all the other options you mentioned above, and though they did not result in the wacky formatting glitch, they did not result in the menu “sticking” at the top either. Weird.

This is the site (in draft mode) – I’m happy to provide you login, but I probably don’t want to post it publicly on this forum….
https://ncmc-draft.dreamhosters.com/

I tried “Dynamic Mode” as suggested in the settings page for the plugin. The menu does stick now! But —

— the rest of the page goes blank.

Try it now – hope you’re online — I have #navigation and have “Dynamic Mode” selected. At my end, at least, when I scroll down, the menu does stick at the top, but then there is a big blank area below it.

No, definitely no login! I wouldn’t want to accidentally break anything ??

I can see what the issue is now. You can disable the plugin again if you want to.
The problem is that your CSS contains a number of “!important” tags related to the navigation menu, for example:

#navigation {
    position: relative;
    left: auto;
    width: 100%;
    border: none;
    padding-top: 0;
    background: #f0f0f0;
    border-radius: 2px;
    display: block !important;

Because of those, the styles that my plugin applies to the navigation are ignored and therefore the plugin won’t work properly.

In general, it’s considered bad practice to use “!important” tags in your CSS, unless absolutely necessary. This is a good example why, I guess — it shows that the site becomes less flexible and a plugin could not work properly.

Unfortunately, there’s not much I can do about this on my end. As long as those tags are still there, they will block my plugin from functioning the way it’s intended.

Hope that makes sense!

Ah ha — I will remove all that. That was some custom code we added in order to “center” the menu. I will remove it and see what happens.

Oh – wait – I was mistaken about the CSS. This CSS above isn’t what I thought it was, within our “custom CSS” file. I’m not sure where the above CSS “lives”, but once I find it, I will delete the line that says “important” and see what happens?

Thanks for your help!

The odd thing is — when the site was in a “full-width” format, the plugin worked beautifully. So, perhaps the above CSS only kicks in when we are using this “box” format?