Sticky Menu Bugs

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!

Comments

  • 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.
  • 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!
  • 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!
  • Awesome, thank you it worked!  I made the margin-top 61 instead, but otherwise that worked.
  • 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?
  • 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.
Sign In or Register to comment.