Answers CSS - NavBar "More" Drop Down Bottom Border

Search Best Practices - Search Front-End
1

Hi all - I have updated some of the content in the “More” drop down to adhere to my client’s styling requests. In order to center the bottom border that appears on hover, I had to add margin:auto. This causes a jumpiness to the nav items because they also center along with the border when you hover over them:

Video: https://www.screencast.com/t/QFYZkSDP

This is the code I have now. Does anyone know how I can center the border but keep the nav items left juxtaposed? Or atleast have all the nav items centered by default to reduce the jumpiness?

.yxt-Nav-modal .yxt-Nav-item{
  color: #3d4042;
  margin: 0 auto;
  &:hover{
border-bottom: 2px solid #3d4042;
width: 90%;
margin: 0 auto;
  }
}
2

Hi Jessie,

Try the following code (I added border-bottom and width:90% to the non hover state)

.yxt-Nav-modal .yxt-Nav-item{
  color: #3d4042;
  margin: 0 auto;
  border-bottom: 2px solid transparent;
  width: 90%
  
  &:hover{
    border-bottom: 2px solid #3d4042;
    padding-left: 3.5px;
    width: 90%;
  }
}