Change font in nav


#1

I may be daft, but I am trying to change the font for items in the nav. I’ve created a custom class (e.g. nav-item), and styled it, but that doesn’t seem to have an effect. Is my automatic class only hitting the ul and not the style for the li? How do you style the li items in the nav


#2

Try: File>Project settings and select the font from there. This will change all text input in other blocs / brics but it can be changed.


#3

You can also do this with a custom class, add a class to the nav menu via the sidebar ‘my-menu’ then using the class manager create another class to target the links in your menu ‘my-menu li a’ when you are warned about spaces opt to keep them in place.

Now set the font value for the ‘my-menu li a’ class, this approach lets you do lots of other stuff with you links too…


#4

@Ant3000 ANT3000 Thanks. Yea I’ve already tried that unfortunately does’t help with if I want h tags and p tag to be in droid sans, but I want the nav to be in droid serif. I can do it by editing the exported css files, but was looking for a way to do it in the Blocs UI

@Norm thanks thats what i was looking for


#5

Hi Norm,

When I create the class with the spaces in it ‘my-menu li a’ the class manager always reverts to adding hyphens so it. ‘my-menu-li-a’ I don’t get the warning dialogue about spaces…

I know we can change the font style for the navs in project settings Navigation Links, but I would like to have control over it via the classes. Any clues…?

Thanks


#6

It’s basically asking you, did you make a mistake by adding spaces as this has a different effect for the class. Do you wan spaces in the name or not?

You do in this case, so select to maintain the spaces in the class name.

Classes are a little more technical but once you understand how they work you are actualy learning how code works a little, which is a bonus!


#7

Hi Norm,

DoH! My fault, I didn’t read your initial instructions properly. I forgot to create the first class called ‘my-menu’ I just tried to create the 2nd one straight up. It works perfect thanks!! :stuck_out_tongue_winking_eye:


#8

I’m not so familiar with classes. File>Project settings was easier for me. But is it possible also have Menu one of the alternatives of objects within some update of Blocs? How to use classes with menu text – could be fine to have some video instruction of it!


#9

I’m having the same problem with the hyphenated-menus. I have a class for my nav menu, and I read your hint about how you should “select to maintain the spaces in the class name.” But how do you do that? When I open the class there’s all kinds of options, but I can’t find a “maintain spaces” option.


#10

Super simple steps to do this.

Select the main navigation and give it a class via the class input field in the sidebar my-menu

Now add another class via the Class Manager called my-menu li a you will be prompted to replace the spaces, choose not to replace the spaces.

I’ve attached an example file for you to look at, in this the menu links are colour red via the custom class.

Menu Sublcass.bloc (198.2 KB)


#11

@Norm
Funny:
I downloaded your file and put it on the desktop.
When I open it I get the famous “missing asset” alert again. (logo.png)


#12

Yes that may be because my file was created in Blocs 2.5 which has a new data structure for assets. Pre 2.5 doesn’t know how to read the data.


#13

Aha.
Waitin’ for 2.5 then. :stuck_out_tongue: