Nav menu font styling

I am looking for a way to change the font styling in the navigation menu. In Rapidweaver 7 (which I currently use) it is straight forward to change the font size, colour and typeface used but I can"t see how to do this in Blocs, or am I missing something obvious?

Easiest way is to select the menu and then set its data feed to none. Then you can select the links and style them using the side bar.

If you require data fed links then use classes to style the nav links. Select the menu, add a class ‘my-menu’ then using the class manager add a class ‘my-menu li a’ and set this classes values to effect the links inside your nav.

1 Like

Thanks Norm. I got that to work but can’t help thinking in a future update it might be good to just incorporate styling options into the navigation menu options as it would be much quicker.

4 Likes

I have created classes to use in the nav menu to style the font and although the normal and hover states work, the active styling doesn’t. I had assumed that the active state would be visible in menu when on the relevant page.
Can anyone suggest what I might be missing?
Thanks,
Richard

Active state, by definition is the moment it is clicked.

In that case it still doesn’t work.
What I currently have set in the class are:
normal: white
hover: yellow
active: red
What I would like to achieve in the menu is that the selected page is in red, all other menu items in white and yellow when hovered over.

Yes… I have seen this before. Not sure if it is a Blocs or a browser issue.

But there is no way to achieve what you want via a link state.

I’d echo Pixelarte’s statement @Norm. I am finding it immensely difficult to do this. I want to change the style of the website name and I am finding it virtually impossible, despite being fairly familiar with classes and subclasses now. Could you take us through it step by step again, please? Have asked @Blocs_guy for a video via Twitter but I don’t think he’s on that much.

Cheers,

Will

I’m not sure if I added this to the project text settings yet, but you can set the style with a custom class too.

Add this class via class manager (.navbar-brand) and set the text size, colour etc via the class editor.

1 Like

Many thanks. Will have a go. You deserve so much success with all your hard work and this super product!

1 Like

So it’s 2024 and the problem is still there, not only is there no obvious way to set the font and size of the navbar menu items, but the mentioned solution does not work. I tried setting a custom class to every element in the menu hierarchy, and it only partially works. That is, I can set the style, transform, or decoration fine, but trying to change the font or the pixel size does not work.

[EDIT: I finally found the reason, I had another conflicting class which was using a font I had since deleted. It would be nice if the class editor could highlight this kind of conflict, and to let the use know why a given item has its current style].

I have to say this is quite annoying, Blocs is a great app overall but suffers from several UX problems that often render it very frustrating to use.

There is an option in Project Settings to do this. This video on the Blocs Academy covers the basics of using these options.

But I agree a way to detect calculated styles on an element and which class is applying them would be great. It’s integrating it into the user interface in a thoughtful / logic way that is the challenging part.

Thanks for the feedback :raised_hands: