[Solved] How to make changes in "full screen menu"

I Need Help
1

hi guys, I cannot find how to change font (size and color) for full screen menu? Also how to change color of symbol? I can only add background to a symbol but can’t change color of it.

2

Hi @piotrek

To edit the size and color of full screen menu links, you can add a class Special Navigation Links from subclass library (in Class Manager) and edit it using the Class Editor. See the screenshot below.

45%20AM
Screen Shot 2020-01-30 at 2.06.45 AM.png1080×690 206 KB

I am not sure if there is a better way to edit the menu icon, but you can add the code below to edit the color and shape of menu icon (shared with me with one of Blocs users).

<style>
#nav-toggle .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
 </style>

You can edit the color by changing the “black” to what you want (like hex color number or the name of color).

You can add this code using the Code Editor window we have in Blocs app.

Cheers,
Eldar

4 Likes
3

Thanks that helped!

4

Hi all,

Not a clue what I am doing here - but im having a brain freeze!!!

-Sorry to bring this up - but for some reason, I just can not seem to get edit the font size on “full screen menu” on my mobile break points - I can change, colour…font…but not the size!

It’s staring me in the face and I have done it many times before ! - I can change font on all other menu’s, just not the full screen menu.

Anyone able to help.

i have created the special navigation link from subclass and this does not work how it used to.

5

Hi Everyone

I know a few people have asked about about the font size in full screen menu.
All other options let me change the font, and the colour - but not the size.

This seems to change it all and thank you to @Jerry who has helped me with this. Below is the class.

.nav-special.fullscreen-nav .nav > li a

2 Likes
6

Hey there - I just wanted to confirm, the class is .nav-special.fullscreen-nav ? It doesn’t seem to work for me.

7

It’s, as @AdieJAM already stated, .nav-special.fullscreen-nav .nav > li a. This way the anchor tags in the menu list items get selected.

So when asked, choose to leave spaces intact.

1 Like
8

works perfect. I do wish though this would work in the normal class font size for the nav, than rather than having a dedicated class for it.

I just hope this forum never vanishes ! as its the holy bible for blocs !

1 Like
9

Oh strange! I didn’t realize you could make classes with marks like “>”. I’ve learned something new.

10

When I tried this it seemed to break the code; gave me bullet points with menu titles and the background colors didn’t change accordingly :confused: