DoppyG Posted March 1 Share Posted March 1 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
tuanphan Posted March 1 Share Posted March 1 What is your site url? 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
tuanphan Posted March 1 Share Posted March 1 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
DoppyG Posted March 2 Author Share Posted March 2 (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 March 2 by DoppyG Link to comment
tuanphan Posted March 3 Share Posted March 3 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; } 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
DoppyG Posted March 3 Author Share Posted March 3 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
tuanphan Posted March 5 Share Posted March 5 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; } 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
DoppyG Posted March 5 Author Share Posted March 5 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 Link to comment
tuanphan Posted March 9 Share Posted March 9 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
DoppyG Posted March 11 Author Share Posted March 11 Amazing, thanks Tuanphan, really appreciate your help! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment