Navigation bar layout shifts with bold

I added custom CSS to bolden navigation bar links with hover, however it shifts the layout of the navigation bar. I've seen people suggesting adding invisible pseudo elements with the width of the boldened title, but when I add them in Squarespace nothing changes.

This is the CSS I currently have. The hover effect works, but the pseudo element doesn't. Would really appreciate any advice

 

/* Adjust the position of the dropdown */
.header-nav-folder-content {
  text-align: left !important;
  position: absolute;
  left: 50% !important;
  right: unset !important;
  -webkit-transform: translatex(-50%);
  -o-transform: translatex(-50%);
  transform: translatex(-50%);
  background: white !important;
}

/* Ensure the hover effect takes precedence */
.header-nav-item a:hover {
  font-weight: bold !important;
}

/* Position the pseudo-element correctly */
.header-nav-item a::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  font-weight: bold;
}

/* Make the pseudo-element visible on hover */
.header-nav-item a:hover::before {
  visibility: visible;
}

What is your site url?

https://www.sashacoalition.org/

When users hover on nav item > item turn to bold >> width changed, for example: Members item has width: 87.36px, but when bold, it is 89.56px

so it will move left/right item to left/right a bit, create problem

The solution I suggest is set more width on each item, but space between items won't be equal.

div.header-nav-item>a {
    min-width: 85px;
    text-align: center;
    display: block;
}

Or you can consider, instead of bold item, will change color of item on hover

Thanks Tuanphan, what do you think about the pseudo element solution I've been trying but hasn't been working? It's suggested here but perhaps isn't possible with squarespace https://css-tricks.com/bold-on-hover-without-the-layout-shift/

I've also tried experimenting with your suggesting to change text colour with hover instead of bold, but unfortunately it's not working either. This is the code I've used. Do you have any suggestions? Thanks again.

.header-nav-item a:hover {
  colour: #003b70 !important;
}

Their approach (CSS-Tricks) require to use JavaScript code, to change structure of Navigation item 

If you use Business Plan or higher, I can try their approach, but if your plan is Personal, this is not possible

Your Hover code doesn't work because you have a typo

color

NOT

colour

It should be

.header-nav-item a:hover {
  color: #003b70 !important;
}

Ah thanks for noticing the typo! It works now.

And it's a Business Plan. If I input the code you wrote above in the code injection will that successfully change the navigation structure? Thanks!

First, add this code to Website > Website Tools > Code Injection > Footer to add data text to all nav items

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div.header-nav-item:nth-child(1)>a').attr('data-text','Home');
    $('div.header-nav-item:nth-child(2)>a').attr('data-text','Members');
    $('div.header-nav-item:nth-child(3)>a').attr('data-text','Resources');
    $('div.header-nav-item:nth-child(4)>a').attr('data-text','Media');
    $('div.header-nav-item:nth-child(5)>a').attr('data-text','Blog');
    $('div.header-nav-item:nth-child(6)>a').attr('data-text','Contact');
});
</script>

we will have

Next, use this code to Website Tools > Custom CSS to print data-text to real text (but hide it)

div.header-nav-item>a:after {
    content: attr(data-text);
    content: attr(data-text) / "";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    display: inline-block;
    font-weight: bold;
}

div.header-nav-item>a:hover {
    font-weight: bold;
}

div.header-nav-item>a {
    display: inline-flex;
    flex-direction: column;
        align-items: center;
    justify-content: space-between;
}

Incredible, thanks Tuanphan! That worked, but only for the main navigation bar, not for dropdowns - do you know how I can make it work for them too?

Thanks,

Daniel

On 3/5/2024 at 5:44 PM, DoppyG said:

Incredible, thanks Tuanphan! That worked, but only for the main navigation bar, not for dropdowns - do you know how I can make it work for them too?

Thanks,

Daniel

Use this new script code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div.header-nav-item:nth-child(1)>a').attr('data-text','Home');
    $('div.header-nav-item:nth-child(2)>a').attr('data-text','Members');
    $('div.header-nav-item:nth-child(3)>a').attr('data-text','Resources');
    $('div.header-nav-item:nth-child(4)>a').attr('data-text','Media');
    $('div.header-nav-item:nth-child(5)>a').attr('data-text','Blog');
    $('div.header-nav-item:nth-child(6)>a').attr('data-text','Contact');
    // Members
     $('div.header-nav-item:nth-child(2) .header-nav-folder-item:nth-child(1) span').attr('data-text','About the SASHA Coalition');
      $('div.header-nav-item:nth-child(2) .header-nav-folder-item:nth-child(2) span').attr('data-text','Our Members');
      $('div.header-nav-item:nth-child(2) .header-nav-folder-item:nth-child(3) span').attr('data-text','SASHA members FAQ');
   // Resources
     $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(1) span').attr('data-text','Report: The Green Hydrogen Gap');
      $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(2) span').attr('data-text','Factsheet: Green hydrogen');
      $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(3) span').attr('data-text','Factsheet: Aviation');  
    $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(4) span').attr('data-text','Factsheet: Shipping');  
    $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(5) span').attr('data-text','Factsheet: Jobs and investment');  
    $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(6) span').attr('data-text','Regulation Roadmap: UK');  
     $('div.header-nav-item:nth-child(3) .header-nav-folder-item:nth-child(7) span').attr('data-text','Regulation Roadmap: EU'); 
     // Media
     $('div.header-nav-item:nth-child(4) .header-nav-folder-item:nth-child(1) span').attr('data-text','Press releases');
      $('div.header-nav-item:nth-child(4) .header-nav-folder-item:nth-child(2) span').attr('data-text','Media coverage'); 
});
</script>

and this new code to Custom CSS box

div.header-nav-item>a:after, span.header-nav-folder-item-content:after {
    content: attr(data-text);
    content: attr(data-text) / "";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    display: inline-block;
    font-weight: bold;
}

div.header-nav-item>a:hover, span.header-nav-folder-item-content:hover {
    font-weight: bold;
}

div.header-nav-item>a, span.header-nav-folder-item-content {
    display: inline-flex;
    flex-direction: column;
        align-items: center;
    justify-content: space-between;
}

Amazing, thanks Tuanphan, really appreciate your help!