Sticky Menu Bugs

jgoodhoofd

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jgoodhoofd

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

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!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jgoodhoofd

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

jgoodhoofd

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next