1

So I have a Wordpress site and I would like to use a bold font weight for the hover animation on the nav items. The problem I am having is that when I hover an item and it becomes bold the size of the element changes and it moves the other items in my nav over.

What I am thinking will solve this issue is giving each of my nav items the width of their bolded version, so when the item becomes bold and grows in size it won't change the size of its container and move the rest of the nav items.

I am using wp_nav_menu() to print my menu to the page.

This is the best solution that I could find but I have no idea how to get data- attributes onto my menu items when using wp_nav_menu(). One answer in this thread is to use drop shadows to fake the bold but it looks terrible in my oppinion, and I would rather not use that method.

This code snippet isn't the exact structure of what Wordpress is creating but it does illustrate the issue that I'm having.

.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>Contact Us</li>
</div>

I am open to any and all solutions using php, query, or just css. The solution also doesn't have to be what I had in mind, if anyone has any better ways to get around this I would be forever thankful!

JDawwgy
  • 888
  • 2
  • 18
YABoi
  • 19
  • 4

1 Answers1

2

You could do with grid

HTML

<ul class="nav">
  <li><a href="">Divisions & Services</a></li>
  <li><a href="">Projects</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Careers</a></li>
  <li>C<a href="">ontact Us</a></li>
</ul>

CSS

.nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 1rem;
  list-style: none;
}
li a{
  text-decoration: none;
  color: black;
}
li a:hover {
  font-weight: 900;
}

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • 1
    This is a great solution, for those of us not super familiar with `display: grid` is there a way to do `grid-template-columns: repeat(5, minmax(0, 1fr));` in a way that more items could be added to the nav to keep them going in a line across the top? – JDawwgy Oct 20 '22 at 16:58
  • This does work, but is there a way to allow the longer title 'Divisions & services' to not wrap to 2 lines? – YABoi Oct 20 '22 at 17:15