Drop down menu font size for mobile

I Need Help
1

Hi all,

One thing I struggle with now and again, and I have to spend a while hunting for how to do it ! - and I have looked on the forum and nothing seems to work! I am baffled as I have done it before! but can’t remember is how to change font size on mobile drop down menu? I can change colour…font…but not the size!

I have a code which does it, but this changes on SM breakpoint too - when I want to keep that as it is and just want XS re-sized.

Why is this such a pain !!! I have a class for the drop down menu full screen, but size does not change on mobile.

Thanks all !

Blocs
Blocs494×756 19.9 KB

2

use: .list-item

1 Like
3

Hi @Jerry - thanks for your post. I have tried that and still no good?

4

Works well for me:
2022-03-17_17-35-15 (1)

1 Like
5

Hi Jerry, Its the drop down menu that will not size…a class will only size font in full menu and nothing when using nav toggle/hamburger

Tried a few ways now on empty projects - Just trying to make a drop down on mobile into something like 5px on the drop down on mobile seems to be mission impossible for me right now ! - hmmmmmmmm i know its looking at me laughing !..but where… :joy: :rofl: :rofl:

6

Hi all - after trying everything, it does seem to be that in a drop down menu on mobile full screen from toggle/hamburger that everything I used to use to re-size the drop down does not work…so with my example below…I can not make the Pink text the same size as the purple!

Blocs-2
Blocs-2550×592 34.8 KB

7

Not on my Mac. But from memory it’s something like

.dropdown-menu a

Preserve space

1 Like
8

Hi @PeteSharp

thanks for trying to help - unfortunately, this does not change the size of the font on the drop down.
@norm could this be a bug on why these aren’t working?

9

Do you have custom classes assigned?

I’m not back on my Mac until around 7pm tonight. Will take a look. Because I just use the dropdown classes usually no issues.

Could be the infamous PEBKAC error :innocent:

10

That could be my Coconut tree as well! :palm_tree: :palm_tree: :rofl: :rofl: :rofl:

11

Create a class in the class manager: .mybutton .nav-link (keep spaces!). Add the class .mybutton to your dropdown and style to fancy.

2022-03-18_07-54-53
2022-03-18_07-54-531920×1806 120 KB

2022-03-18_07-59-13
2022-03-18_07-59-13852×1452 26.7 KB

12

Hi @PeteSharp - yes had these assigned, tried loads now and none will work.

@Jerry - thanks for sending, tried that too - but its not solving what the problem, if you see my images posted (see below)

I am over exaggerating the purple by making is around 5px to make the pink drop down section stand out. It is pretty impossible to make the pink text into a 5px font to match…well unless we find the right class. Styling the main menu is just normal - its the drop down text and this is in full screen mode from the toggle/hamburger.

tried everything!.. @Norm is this a bug - ill submit it.

Blocs-2
Blocs-2550×592 34.8 KB

13

I still don’t understand your problem. It works perfectly…

2022-03-18_16-10-30 (1)

It’s the famous PEBKAC error :interrobang:

14

Because that’s not the problem

@Jerry - looks great! & I can do that too - that’s easy! - but that’s not the problem.

The problem is as explained on my post with the images to match.
= Full page menus from the toggle/hamburger
= I can’t get the font smaller on XS mobile breakpoint.

15

Not yet!!! :wink:

16

Well, yes. your 5px dropdown menu on xs breakpoint. I still don’t understand your problem :thinking:
2022-03-18_17-08-02 (1)

It’s Friday afternoon. I’m putting this to rest and will be spending the rest of the evening under my coconut tree :grin: :palm_tree:

EDIT: You asked this question before.
[Solved] How to make changes in "full screen menu" - #5 by AdieJAM :grin:

…Back to my coconut tree :palm_tree: :desert_island:

17

Be careful you don’t rediscover Isaac Newton’s theory of gravity. It’s one thing having an apple fall on your head, but quite another if a coconut hits you.

1 Like
18

Well I am baffled as none of the classes shown here work !..lol

No - that was nothing to do with the drop down, that was the menu, and that works…just everything that goes to the mobile version full screen is not as easy as it seems - but not to worry, I will figure it out - @Jerry thanks for your time and enjoy your rest under your tree!

19

Hi all,

@Eldar came with the full proper class to do what I want, so if anyone wants to edit drop downs on mobile too etc this is the class:

.nav-special.fullscreen-nav .nav > li a, .nav-special.fullscreen-nav .nav .dropdown-menu > li > a

Thanks @Eldar

20

@AdieJAM , You don’t need to use all that.

I missed the li before, forgot it was a list :man_facepalming: But it should still have worked without it, so you may have missed something.

.dropdown-menu li a

(Preserve space).

if you have other dropdowns on the page, you can target it specifically with navbar for example…

.navbar .dropdown-menu li a

2 Likes