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

[Alan]

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?

[Fernando]

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.

[Alan]

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?

[Alan]

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!!

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan]

Thank you, David!!

[Author]

Posts