Hello there. I need to change letter spacing for Nav Items in Nav Bar Pro. I guess I would need to inject some code, but I am not familiar with CSS nor HTML. Any suggestion ?
Nav Bar Pro has a ton of options, but it doesn’t look like letter spacing is one of them. It’s one of those settings not usually changed. If you want to change it, you’ll have to add some CSS to do so.
I’m not sure what your level of knowledge is of CSS, but the best way to accomplish this is to add a class targeting the nav items with the CSS to adjust letter spacing in either the page-specific or site-wide CSS area in RW. You would then add that CSS class to the “CSS Classes” box in the Nav Bar Pro.
If you’d like help with the correct CSS selectors to target the text you want adjust, then please provide a link to your page and detailed information on what you are trying to adjust.
2 Likes
It sounds brillant ! I understand the idea. Here is a link of my page :
I would like to adjust letter spacing for the following Nav items : ACCUEIL, FORMATION, PRISE DE VUE and PHOTOGRAPHIE D’ART.
These items relates to different pages of my site.
I really appreciate your help !
Try this CSS in the page or site-wide CSS area:
/* Adjust letter spacing on the Nav Bar Pro items */
.nav-letter-spacing ul.nav-bar-items li a {
letter-spacing: 0.1rem;
}
Add nav-letter-spacing to the “CSS classes” field in the Nav Bar Pro stack.
Adjust the spacing to suite your needs. You can use px, rem, etc. for the spacing value. Google “CSS letter-spacing” if you need more details on the setting available.
Remember that as this is custom code, it could break if Elixir updates Nav Bar Pro in the future. Don’t forget that you made the change, in case that happens.
3 Likes
Brillant. It works just great. Thank you very much, Dan.
I have got another question on a different Elixir stack named “Flat button 2”. I would like to set the same border colour on hover as the background colour. There is a white border on button in my different banners. I think I have found something interesting :
#stacks_in_2468 a:hover,
#stacks_in_2468 a:active {
background-color: rgba(18, 139, 212, 1.00);
color: rgba(255, 255, 255, 1.00) !important;
For now, colour is set to white, but I would rather have rgba(18, 139, 212, 1.00).
If I get the code, I guess I will be able to inject similar code for buttons in other stacks such as Scroll To, Sort and Mega Modal. I would like buttons look the same on every page of my site.
Thank you very much for helping !
On the buttons such as “En savoir plus”, you want a blue button with white text without the white border when you hover over it?
I don’t have Flat Button. Is there a field to add CSS Classes in the stacks settings? There probably is. If so, can you add “btn-border-hover” into that field and republish? I need to see where it gets added to be able target the button border correctly. Just adding that shouldn’t cause any issues.
1 Like
Yes, on hover, I want a blue button with white text and a blue border. I think it is important to maintain the border, so button has the same size (normal versus on hover).
There you are. I have republished the page and put “btn-border-hover” in the CSS class in Flat Button 2 stack.
Thanks so. much !
Here you go:
.btn-border-hover a:hover {
border-color: rgba(18, 139, 212, 1.00) !important;
}
It’s only working on the first button, as that’s probably the only one with the class added.
This will change all of the Flat Button 2 buttons, without needing a class to be added:
.flat_button_2_alignment a:hover {
border-color: rgba(18, 139, 212, 1.00) !important
}
2 Likes
It works great, it’s brillant ! As an expert, I am wondering if you could help me regarding 2 more issues on the following page : Studios Drakkar | Formation en photographie
-
I would like to set white colour for text and border on Scroll To stack’s button “Contactez-nous” in the banner “Atelier pratique - Mosaicultures Quebec 2022”.
-
On Sort stack’s button in the banner “Programme de formations”, I would like to set rounded corners for filter buttons.
Finally, on the following page,
It would be great if I could set rounded corners to Mega Modal stack’s button named “Reserver une place”.
That would complete my styling adaptation on my website. Please tell me if it is possible.
The following CSS code snippets target the buttons by type and would affect all buttons of each type: Scroll To Button, Sort Buttons, Mega Modal Button. If it affects too many, change the class to a custom name and assign that class name to the individual buttons.
/* Custom Scroll-to Button formatting */
.com_elixir_stacks_foundryScrollTo_stack a {
color: white;
border-color: white;
}
.com_elixir_stacks_foundryScrollTo_stack a:hover {
border-color: rgba(18, 139, 212, 1.00);
}
/* Custom Filter Button Formatting */
.filter-buttons {
border-radius: 4px;
}
/* Custom Mega Modal Formatting */
.com_elixir_stacks_foundryMegaModal_stack a {
border-radius: 4px;
}
1 Like
Thanks a lot, Dan. Custom name works for all buttons, except filter-buttons. When I change “filter-button” for another name, and assign that class to the sort stack, it doesn’t work.
And I have tried to modify your “.filter-buttons snippet” to change font size. Unfortunately, it doesn’t work. Here is the new snippet :
/* Custom Filter Button Formatting */
.filter-buttons {
font-size: 15px;
border-radius: 4px;
}
Thanks !
Did you republish after making the changes? I’d like to see the current state of the CSS. Please put the code in and re-publish. I should have time later this evening to take a look.
p.s. I’m Don, not Dan.
2 Likes
Sorry Don. Yes, I forgot to republish. There you are.
It looks to me like the filter buttons now have the rounded corners. So the selector and CSS for that is working.
The font size for the button is specified after the custom CSS in the main CSS stylesheet, so it overrides the 15px code in the CSS you added. Sometimes you can force a rule to take precedence by adding the “!important” property. It will work in this instance.
Try: font-size: 15px !important;
2 Likes
It works ! That’s very kind of you, Don. Thank you for helping.