Source Nav Bar - how to change font size?

[scottf]

Hi all,

Just starting out with Source…and would like to increase the font size of the menu items within the nav bar.

Any thoughts please…can’t find anything in the workbook I purchased and not many tutorials with STH.

Many thanks for ideas.

Cheers Scott

[habitualshaker]

Hi @scottf - there is no setting for that currently (will consider it though). The navbar just picks up the base font size for the page.

You can add some css to achieve it though (probably best doing so at project level) - e.g. .navbar{font-size: 110%}.

[scottf]

Hi Stuart,

Thanks, I’ve popped that css into the Nav settings but didn’t seem to make any difference to font size in menu…any ideas please?

Screenshot attached.

I guess that any changes to font type, colour etc of the menu items are also controlled by the base settings of the page…no separate control for just menu items in Source?

I’ve been a Foundry user for many years and testing the options in Source or Foundation 6 to see how each will suit me best.

Thanks so much for your help.

Cheers Scott

[GKs]

Hello Scott,

there was a small misunderstanding, which caused Stuart’s suggestion to not work. You have entered the CSS code in the ‘Custom class’ field of the stack - however, you would need to enter the CSS code in the Rapid Weaver CSS code area. There is a CSS code area per page, and another one per project (thus applying the CSS to every page). The latter is very likely what you want to do, assuming that you want to have the Navbar appear the same on all of the pages.

I took a screenshot of a test project to illustrate where you can find the project-wide CSS code area. If you enter the code there, it should work. Please give it a try:

[scottf]

Hi Gerd,

Great thank you, yes that did the trick. 😁

I’m used to Foundry and the ease of doing things in that platform. I’m sure I’ll learn in Source too.

Foundry nav menu system also allowed for change of background colour and blur underneath the menu bar when fixed and scrolling so if I have colour set to % of transparency then the main body text is blurred underneath the menu bar…lovely feature in Foundry.

I wonder if a method to also blur underneath the menu bar using css??

Have a great day.

Thanks Scott

[GKs]

Glad to hear you got the one issue resolved. As for the blurred, transparent background - since it works in Foundry, there is likely a solution in Source, too.

There are CSS wizards in this community, I am sure, someone will jump in and provide some ideas.

[scottf]

Hi Stuart,

I’m also getting an error with the Botanist project file advising I don’t have Splider installed, though it is there…see screenshot.

I’m purchased the bundle so not sure why getting this error. Have redownloaded and installed again but same message is displayed.

Can you please advise.

Cheers Scott

[Bruno]

Hi @scottf
Here’s a bit of css to try for your navbar:

.source-nav-bar {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background color */
    backdrop-filter: blur(10px); /* Applies blur effect to the content behind */
    -webkit-backdrop-filter: blur(10px); /* Ensures compatibility with Safari and WebKit-based browsers */
    transition: background-color 0.3s ease; /* Smooth transition for background color changes (optional) */
}

Just replace the name of this example by your CSS class ID for the navbar.
Hope it will work for your need with sticky navbar.
You have Splider 2, it requires here splider 1 (older version), I encountered the same issue. You just have to download the splider 1. I think I’ve found it somewhere on the Stuart’s site, poor memory 🥱
Anyway hope that helps.

[habitualshaker]

Yes - as @Bruno says. That project uses Splider 1. That stack was included for free with the download for Splider 2 so you just need to also install it. Splider 1 still works fine or you could opt to switch it out for v2.

And for the blur, what @Bruno advises will work. There are also some ‘utility classes’ that Source offers that could be used instead though. Either s-blur-bg or s-frost should work for you. Note: that this time you will add one of these names to the Custom class box in the stack.