CODEWITHSUNDEEP
javascriptphpjquerycsswordpress
JDawwgy
JDawwgy

Reputation: 935

How can I make Wordpress nav items not shift when bold hover applied

I want my WordPress Navigation to have a bold effect on hover, but when I make this with display: flex; hovering the item with the longer name is moving the rest of the items in the nav over because the bolded version of the menu item is now wider than the non bolded version.

.nav {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
li:hover {
  font-weight: bold;
}
<div class="nav">
  <li>Divisions & Services</li>
  <li>Projects</li>
  <li>About</li>
  <li>Careers</li>
  <li>More</li>
  <li>More</li>
  <li>Contact Us</li>
</div>

I had hoped that using display: grid; like below would be a good solution. It does achieve what I hoped for based on the issues of the display: flex; above, but I would much prefer if all the text could be on one line instead of having the item with the longer name "Divisions & Services" break to the next line.

.nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 1rem;
  list-style: none;
}
li:hover {
  font-weight: bold;
}
<ul class="nav">
  <li>Divisions & Services</li>
  <li>Projects</li>
  <li>About</li>
  <li>Careers</li>
  <li>More</li>
  <li>More</li>
  <li>Contact Us</li>
</ul>

I found a solution that I thought would work well In this answer but I'm using wp_nav_menu() to print my navigation to the screen and I'm not sure if I'm able to get data- attributes added to the menu elements when using this function.

Any solutions that solve both of my problems are appreciated!

  1. No layout shift when hovering an element and it turns bold - increasing its size
  2. No menu items wrapping to 2 lines when their name is longer than the grid container (also not overlapping other grid sections)

I am open to solutions that are purely CSS, javascript/jquery, or php

Thank you in advance!

Upvotes: 1

Views: 147

Answers (1)

Asmoth
Asmoth

Reputation: 563

You can use text-shadow instead of font-weight: bold. This will not change the font-size.

.nav {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
li:hover {
  text-shadow: 1px 0px 0px black;
}
<div class="nav">
  <li>Divisions & Services</li>
  <li>Projects</li>
  <li>About</li>
  <li>Careers</li>
  <li>More</li>
  <li>More</li>
  <li>Contact Us</li>
</div>

Upvotes: 1

Related Questions