CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menunavbarjquery-hover
dnat
dnat

Reputation: 65

Cannot access dropdown menu on hover, close gap

My website has a navbar with a dropdown menu. On devices that have a width of 1024px (12 and 13 inch desktops), my navbar becomes responsive and stacks into 2 rows to adjust for the smaller screen size.

When I hover on a menu item in the top row of the navbar, the dropdown menu shows below the bottom row of the navbar. This creates a gap that breaks the hover action. I need to close the gap ONLY ON THE TOP ROW MENU ITEMS of the navbar. I copied the below code from inspecting the element of the dropdown menu I want to move up:

.navbar-nav>li>.dropdown-menu {
margin-top: -10px;
}

.dropdown .dropdown-menu {
border-radius: 0;
top: 120% !important;
}

.yamm .dropdown-menu {
left: auto;
}

.dropdown-menu {
min-width: 110px;
padding-right: 25px;
}

.dropdown-menu {
z-index: 1021;
position: absolute;
display: none;
float: left;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

If you need a better explanation you can check it out live, greenenvysupply.com and zoom in your screen size until the navbar stacks and forms two rows. Then try hovering on a top row menu item that has menu item below it. You won't be able to access the dropdown.

I have tried the following code thinking I could adjust the top margin only on screen sizes of 1024px:

@media (width: 1024px) {
   #menu-item-5044 .dropdown-menu, #menu-item-5066 .dropdown-menu, 
   #menu-item-5076 .dropdown-menu, #menu-item-5085 .dropdown-menu, 
   #menu-item-5113 .dropdown-menu, #menu-item-5129 .dropdown-menu, 
   #menu-item-5128 .dropdown-menu, #menu-item-5111 .dropdown-menu {
      margin-top: -67px !important;
   }
}

When I test this, I see no changes. I am completely new to coding and web design, please correct me if I'm doing something wrong!

Upvotes: 0

Views: 376

Answers (1)

benjarwar
benjarwar

Reputation: 1804

Looking at the code at the specified URL, I'm noticing a lot of conflicting CSS. The top position of your .dropdown-menu elements are set multiple times, and done with !important declarations which will make them difficult to override.

When I examined the .dropdown-menu elements in the Chrome inspector and disabled all top positioning, like:

 .dropdown .dropdown-menu {
    top: 120% !important;
 }

I was able to see the menus appearing just below their triggers. I'd start by removing that and seeing if it gets you closer.

But in short, I don't think there's an easy solution here without redoing a lot of the CSS. I also think you're fighting a losing battle if you're trying to change the position of just the handful of menus that are appearing on the top line.

Upvotes: 1

Related Questions