Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 7, 2017 at 4:08 pm #817914
    musedesignca

    I have a dropdown menu that we moved up with some CSS so it would be right under the “services” button but now when I scroll down a page and the sticky header gets activated and I hover over “services” the drop down menu overlaps the main nav button. How can I get it so it’s always right under the button whether its the full sized header or the sticky header?

    This is the page:
    dev.cabra.ca

    And this is the CSS we used to move it up and over:
    ul.sub-menu{
    margin-left:18%!important;
    margin-top:-50%!important;
    }

    July 7, 2017 at 8:29 pm #818000
    Sarah

    Hey musedesignca,

    Please try this instead of that CSS:

    
header:not(.header_scrolled) ul.sub-menu{
margin-left:18%!important;
margin-top:-50%!important;
}
header.header-scrolled ul.sub-menu {
margin-left:18%!important;
margin-top:-18px !important;
}

    Best regards,
    Sarah

    July 11, 2017 at 10:33 pm #819663
    musedesignca

    That code worked great for the desktop sub-menu but now when I look at the mobile hamburger menu it has moved up the sub items there too. How can I get this code above to only affect the desktop view? (and not the hamburger menu)?

    July 12, 2017 at 6:44 am #819813
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (min-width: 768px) {
header:not(.header_scrolled) ul.sub-menu{
margin-left:18%!important;
margin-top:-50%!important;
}
header.header-scrolled ul.sub-menu {
margin-left:18%!important;
margin-top:-18px !important;
}
}

    Best regards,
    Rikard

    July 12, 2017 at 9:37 pm #820228
    musedesignca

    Thanks, that seems to be working now!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Dropdown menu overlapping main navigation on sticky header’ is closed to new replies.