warning lights warninglightsoncar.com dashboard
scale calculator mapscalecalculator.com 2023
step mom anal bangbf.com porn
public agent anyxxxtube.net porn
hd porn xxxxmag.net video

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!


  • 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.
exxenbet play action games mod apk indir menajer