Mobile Navigation: change font size and dropdown icon

Hi :smiley:

I am trying to do 2 things with the navigation Bric: change the font size on mobile and the dropdown icon.

In my Bloc settings I give a font size for the Navigation Link and a color (in my case white). The color change works, but not the font size.

Screenshot 2021-09-21 at 11.41.11

Then I would like to change the dropdown icon instead of an arrow down, I would like to have a custom icon or a “+” icon.

Is it possible or do I need to go through CSS?

Many thanks!

Once you add a setting there, it will create the custom class for you. Go to the Class Editor and you will see…

.navbar-nav li a

Use this to style your navigation menu.

Screen Shot 2021-09-21 at 10.07.46 PM

Also use this sub class for changing the navigation on the mobile menu…

Also the reason you probably dont see any difference when you set the navigation link to 15px is its close to the default size of 1 rem, which is usually 16px.

I would suggest using rem over px personally.

You will have to add some CSS to the project header. The caret is using a Pseudo Element, you could replace it with something like this… this will give you a + font awesome icon…

Screen Shot 2021-09-21 at 10.22.06 PM

<style>
.dropdown-toggle::after {
	border: 0;
	font-family: "Font Awesome 5 Free"; content: "\f067";
	font-size: 0.5em;
	margin-left: 0.5em;
}
</style>

The border 0 removed the caret.

1 Like

Many thanks @PeteSharp :slight_smile:

1 Like