Sticky Menu Bugs

jgoodhoofd · October 2014

First of all, your menu is great - looks great, and the sticky option is very nice as you scroll down the page.

However, I'm finding that as I scroll down the page on my website, this sticky menu creates problems for animations or mouse-overs near the menu. Please see this page: http://oakvillecounselling.com/01oc/sticky-menu-bugs-example/

If you scroll halfway down the page, the one or two buttons directly below the menu don't have the mouse over animation. I suspect this is because of the additional css I am using (it appears that roughly 170 pixels below the menu doesn't work for animations):

#Top_bar .logo { border: 0px solid #000 !important;

height: 170px;

}

.header-stack #Top_bar { border: 0px solid #fff000 !important; }

body.header-stack:not(.template-slider) #Header { min-height: 158px; }

body { padding-top: 0 !important; }

.header-stack.header-center #Top_bar .logo { text-align: left !important; }

#Header .menu > li { display: inline-block; float: none;}

#Top_bar .menu_wrapper { text-align: center; width: 100%; }

#Top_bar .top_bar_left { width: 100% !important; }

.header-stack #Top_bar .top_bar_right { display: none; }

#Top_bar.is-sticky .menu > li:not(.mfn-megamenu-parent) { top: -170px; }

Please help provide a solution so that the mouse-over links below the menu work!

Albert · October 2014

Hi,

we are not sure which css is the problem so you must remove them one by one and check when it will start working properly.

jgoodhoofd · October 2014

I went through and one by one removed each of those lines, and this didn't solve the problem. When I removed: #Top_bar .logo {height: 170px;} it seem to have reduced the area below the sticky menu that affects the mouse overs, but still not working properly.

Is there a way to edit the two heights here:

#Top_bar .logo {height: 170px;}

body.header-stack:not(.template-slider) #Header { min-height: 158px; }

...so that the height is provided only for the non-sticky condition. Then for the sticky condition the height is 60 pixels. I think providing a solution like that in css might help. Please help as I need a solution to this issue!

Albert · October 2014

We have checked your website once again and the problem is with custom css as we wrote above. Please make below changes:

Please remove below things from custom css:

.header-stack #Top_bar .menu_wrapper { clear: both; }
#Top_bar .logo { height: 170px; }
#Top_bar.is-sticky .menu_wrapper { clear: none; }
#Top_bar.is-sticky .menu > li:not(.mfn-megamenu-parent) { top: -170px; }

And then please add below css:

#Top_bar.is-sticky .menu_wrapper { margin-top: 0; width: auto; }
#Top_bar .menu_wrapper { margin-top: 55px; }

But if above solution somehow won`t help, then we have no other solution for you.

Thanks for understanding!

jgoodhoofd · October 2014

Awesome, thank you it worked! I made the margin-top 61 instead, but otherwise that worked.

jgoodhoofd · October 2014

Actually nevermind, it's not fixed.

Using margin-top: 55px; works for longer pages (http://oakvillecounselling.com/01oc/about/) but then it doesn't work for the homepage (http://oakvillecounselling.com/01oc/), 61px instead works.

Is there a way to get the css to margin-top to work for both shorter and longer pages?

Albert · October 2014

Sorry but as we wrote above, nothing else is not possible. This is the only solution we can give you. We already spent a lot of time on this customization and unfortunately this can`t be done other way.

Sticky Menu Bugs

Comments