Navigation Hover CSS-CodePudding

I have common issue, I've been started a new project and forgot some things about css. For a long time been working with JS. So my issue is creating nav bar. Added <a> link as logo in the left corner of nav bar and links such as "Home","Contacts" and "Products" at the right corner. And been trying put :hover on logo link padding: 9px 12px and I get a problem with it. When cursor is on logo than hover spread out maybe 3px WHOLE navigation bar. What should I do to fix this problem? Tried make bigger nav bar and links, but than it looks not good. Sorry for bad English. I'll add html and css code for example

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>

<body>

    <nav>
        <div >
            <a  href="./index.html">CampHouse</a>
        </div>
        <div >
            <a  href="./index.html">Home</a>
            <a  href="./products.html">Products</a>
            <a  href="./contact.html">Contact Us</a>
        </div>
    </nav>
</body>
</html>

CodePudding user response：

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

CodePudding user response：

go to your general styling and give it box-sizing border box

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>

<body>

    <nav>
        <div >
            <a  href="./index.html">CampHouse</a>
        </div>
        <div >
            <a  href="./index.html">Home</a>
            <a  href="./products.html">Products</a>
            <a  href="./contact.html">Contact Us</a>
        </div>
    </nav>
</body>
</html>

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Great Vibes&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap" rel="stylesheet">
</head>

<body>

  <nav>
    <div >
      <a  href="./index.html">CampHouse</a>
    </div>
    <div >
      <a  href="./index.html">Home</a>
      <a  href="./products.html">Products</a>
      <a  href="./contact.html">Contact Us</a>
    </div>
  </nav>
</body>

</html>