Jump to content

Navigation bar layout shifts with bold

Recommended Posts

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

Link to comment
  • Replies 10
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

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

Edited by DoppyG
Link to comment

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

image.png.a6e5a151c2578ac8be3b2d7090fbf85b.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment

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

image.thumb.png.51fdc97e9ca0f4c8627b2866598bc88e.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.