Navigation Hover CSS

Question

I am trying to create a nav bar. I added a logo in the top left of the nav bar and links "Home", "Contacts", and "Products" in the top right.

I am trying to put :hover on the logo link with padding: 9px 12px and I get a problem with it.

When the cursor is over the logo, then the hover moves the whole navigation bar about 3px.

I tried to make the nav bar and links bigger, but then it does not look good.

Here is my code:

a{
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(144, 144, 144);
    padding: 10px 20px;
}

.nav__logo {
    background-color: rgb(208, 208, 208);
    padding: 7px 9px;
    border-radius: 40px;
}

.nav__logo a {
    font-size: 28px;
    font-family: 'Great Vibes', cursive;
}

.nav__logo:hover {
    background-color: rgb(176, 176, 176);
    padding: 9px 12px;
}

.nav__logo-text {
    margin: 0;
    font-weight: 500;
    font-size: 23px;
}

.nav__single-link {
    padding: 18px;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 17px;
}

.nav__single-link:hover {
    background-color: rgb(208, 208, 208);
    border-radius: 12px;
}

BrunoPierca · Answer

the increased padding is pushing the whole nav down because padding, margins and borders take up space. Anyways, I think I know what you're trying to do, instead write this:

.nav__logo:hover {
background-color: rgb(176, 176, 176);
transform: scale(1.1, 1.1);
}

This way, when you hover the element, it will increase its visual size by 10 percent on each axis, for more info you can look at Mozilla's scale() documentation

Japhet Onyeagucha · Answer

Go to your general styling and give it box-sizing: border-box;

Kameron · Answer

Use transform: scale instead of padding on :hover. In your example, the height is determined by padding on either nav or its containing elements, such as nav__logo. When you increase the padding on the containing elements, the height on the nav will also grow.

This can be resolved by adding a max-height on nav if you wanted to go the padding route. You can also set the :hover directly on the a instead of the div. However, transform: scale seems more fitting here.

a{
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(144, 144, 144);
    padding: 10px 20px;
}

.nav__logo {
    background-color: rgb(208, 208, 208);
    padding: 7px 9px;
    border-radius: 40px;
    transition: all 1s ease;
}

.nav__logo a {
    font-size: 28px;
    font-family: 'Great Vibes', cursive;
}

.nav__logo:hover {
    background-color: rgb(176, 176, 176);
    transform: scale(1.1);
}

.nav__logo-text {
    margin: 0;
    font-weight: 500;
    font-size: 23px;
}

.nav__single-link {
    padding: 18px;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 17px;
}

.nav__single-link:hover {
    background-color: rgb(208, 208, 208);
    border-radius: 12px;
}

userEkYa · Answer

Try the hover on .nav__logo a:hover instead of .nav__logo:hover

a {
  text-decoration: none;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(144, 144, 144);
  padding: 10px 20px;
}

.nav__logo a {
  background-color: rgb(208, 208, 208);
  padding: 7px 9px;
  border-radius: 40px;
  font-size: 28px;
  font-family: 'Great Vibes', cursive;
}

.nav__logo a:hover {
  background-color: rgb(176, 176, 176);
  padding: 9px 12px;
}

.nav__logo-text {
  margin: 0;
  font-weight: 500;
  font-size: 23px;
}

.nav__single-link {
  padding: 18px;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 17px;
}

.nav__single-link:hover {
  background-color: rgb(208, 208, 208);
  border-radius: 12px;
}





  
  
  
  
  
  
  
  
  




  
    
      CampHouse
    
    
      Home
      Products
      Contact Us

Navigation Hover CSS

4 Answers