Site logo

Archived topic

Menu dropdown shakes around and then gets small before you can click on it.

7 replies · Started by Alan on October 5, 2022

Viewing posts 1–8 of 8

Hello!

I just added some dropdowns to my menus and they shake all over the place when you try to click on them. How do I fix this?

Hi Alan,

You'll need to remove this line in your Additional CSS:

padding: 0px;

from:

.main-navigation .main-nav ul li a:hover{
	color: #fff;
	background-color: #00a0dd;
	padding: 0px;
	border-radius: 200px;
	border-style: solid;
	border-width: 2px;
	border-color: #00a0dd;
}

It's making the button smaller, causing the issue.

Thank you so much for your help with this! It is also changing size on Mobile. Is there some code I need to remove for that?

I just applied the change and it fixed it for mobile, so we are all set!! Thank you again for your help, Fernando! You are amazing!!

Hi there,

might be worth taking a step back.
Remove this CSS:

/*Main Nav Buttons*/
.main-navigation .main-nav ul li a{
    padding: 0px;
    border-radius: 200px;
      border-style: solid;
      border-width: 2px;
      border-color: #00a0dd;
  }
  
  .main-navigation .main-nav ul li a:hover{
      color: #fff;
      background-color: #00a0dd;
      padding: 0px;
    border-radius: 200px;
      border-style: solid;
      border-width: 2px;
      border-color: #00a0dd;
  }
  
  .main-navigation .main-nav ul li.current-menu-item:hover > a,
  .main-navigation .main-nav ul ul li.current-menu-item:hover > a {
    border: none;
    color: #fff;
      background-color: #00a0dd;
      padding: 0px;
    border-radius: 200px;
      border-style: solid;
      border-width: 2px;
      border-color: #00a0dd;
  }
  
  .main-navigation .main-nav ul li{
    padding: 10px;
      min-width: 200px;
      text-align: center; 
  }

and try adding this:


#site-navigation .main-nav ul li a{
    border-radius: 100px;
    border-style: solid;
    border-width: 2px;
    border-color: #00a0dd;
    margin: 5px;
    text-align: center;    
}
#site-navigation .main-nav ul ul li a {
    padding: 12px;
}
#site-navigation .main-nav ul li:hover > a {
    color: #fff;
    background-color: #00a0dd;
}

Thank you so much, David! I really appreciate your help with this!

Sorry i missed your previous reply ... glad to hear you got it working !!

Thank you, David!!

This archived topic is closed to new replies.