how do I prevent elements to move, when I increase the font size of an element when hovering?-CodePudding

I want to increase the font size of .navbar span when hovering, which works perfectly fine, but the elements around it move with the increased font size. How do I prevent this?

.navbar {
    padding: 15px;
    margin: -8px;
    border: 1px solid hsla(0, 0%, 95%, 0.5);
}

.navbar span {
    margin: 70px;
    font-weight: 600;
}

.navbar span:hover {
    font-size :20px;
}

   <body>
      <header>
        <nav>
            <div >
                <span>Startseite</span>
                <span>Speisekarte</span>
                <span>Kontakt</span>
            </div>
        </nav>
        <h1 >Julio's Pizza</h1>
      </header>
   <body/>

CodePudding user response：

Allocate the elements enough space so that they don't overflow. Try to allocate a fixed amount of px for each of the spans inside of the .navbar:

.navbar > span {
  width: [x]px;
  height: [y]px;
}

or set the dimensions of the .navbar itself to some fixed number of px or rem.

Be sure to handle the mobile scaling as well and the common approach is to start with mobile devices and apply breakpoints as the screen size increases.

CodePudding user response：

What you could do is not use any paddings, but instead define the height of your navbar and use flex to position your <span> elements. Something like this:

.navbar {
  height: 50px;
  margin: 0;
  border: 1px solid hsla(0, 0%, 95%, 0.5);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.navbar span {
  flex: 1;
  text-align: center;
  font-weight: 600;
  transition: 0.3s;
  transition: all .2s ease-in-out;
}

.navbar span:hover {
  font-size: 20px;
}

<nav>
  <div >
    <span>Startseite</span>
    <span>Speisekarte</span>
    <span>Kontakt</span>
  </div>
</nav>

CodePudding user response：

The easiest approach is simply increase the element's scale:

*,
 ::before,
 ::after {
  /* setting the default font-size for all elements: */
  font-size: 16px;
}

.navbar {
  padding: 15px;
  margin: -8px;
  /* changed the colour to the updated/current version
     of whitespace-separated hue, saturation and light
     and the alpha following the '/' character: */
  border: 1px solid hsl(0 0% 95% / 0.5);
}

.navbar span {
  /* in order to allow transform to be used effectively: */
  display: inline-block;
  margin: 70px;
  font-weight: 600;
  /* setting the default scale to 1: */
  transform: scale(1);
  /* setting up the transition, to affect the 'transform'
     property-values, over 0.3 seconds with the ease-in
     transition timing: */
  transition: transform 0.3s ease-in;
}

.navbar span:hover {
  /* using a large scale to make the transition/increase
     more obvious, but adjust to your own preference: */
  transform: scale(1.5);
}

h1 {
  /* because I set all font-sizing on the page to 16px
     here we update the <h1> element(s) to have a font-
     size to be twice the root-em size: */
  font-size: 2rem;
}

<header>
  <nav>
    <div >
      <span>Startseite</span>
      <span>Speisekarte</span>
      <span>Kontakt</span>
    </div>
  </nav>
  <h1 >Julio's Pizza</h1>
</header>

I've used transition to cause the change in transform to animate between the 'normal' and 'hover' states.

I would, however, recommend a slightly revised approach to your HTML, for example:

*,
 ::before,
 ::after {
  /* explicitly setting the browser to the same layout/sizing calculations
     for all elements; this includes padding and border-width in the assigned
     height/width settings: */
  box-sizing: border-box;
  /* setting the default font-size for all elements: */
  font-size: 16px;
}

header {
  display: flex;
  flex-direction: column-reverse;
}

h1 {
  /* because I set all font-sizing on the page to 16px
     here we update the <h1> element(s) to have a font-
     size to be twice the root-em size: */
  font-size: 2rem;
}

.navbar {
  padding: 15px;
  /* changed the colour to the updated/current version
     of whitespace-separated hue, saturation and light
     and the alpha following the '/' character: */
  border: 1px solid hsl(0 0% 95% / 0.5);
  display: flex;
  align-content: center;
  justify-content: space-between;
  list-style-type: none;
}

.navbar li {
  font-weight: 600;
  /* setting the default scale to 1: */
  transform: scale(1);
  /* setting up the transition, to affect the 'transform'
     property-values, over 0.3 seconds with the ease-in
     transition timing: */
  transition: transform 0.3s ease-in;
}

.navbar li:hover {
  /* using a large scale to make the transition/increase
     more obvious, but adjust to your own preference: */
  transform: scale(1.5);
}

li:first-child {
  transform-origin: left center;
}

li:last-child {
  transform-origin: right center;
}

<header>
  <!-- the <h1> content is, arguably, among the most important content on the page,
       therefore I feel it should come first in the markup; if the <h1> should appear
       visually after the navbar content then we can (as I have here) use "display: flex"
       and use "flex-direction: column-reverse" to have it appear as you wish: -->
  <h1 >Julio's Pizza</h1>
  <nav>
    <!-- the navigation is, conceptually, a list of links in a particular order; so
         I follow the trend/custom of using an <ol> for these links; though you've
         not used <a> elements to wrap those links/titles, so I just changed the
         <span> elements to <li> elements without an enclosed <a> element: -->
    <ol >
      <li>Startseite</li>
      <li>Speisekarte</li>
      <li>Kontakt</li>
    </ol>
  </nav>
</header>