Title says it all. I got the menu look how I want, but would like to change the size of the dropdown menu links on mobile to be smaller, since one dropdown entry is rather long.
Help appreciated 
Live site: http://wildevoegel.fynndesign.de
1 Like
I’m using that class and it works on the two larger device sizes. Doesn’t change a thing on the mobile sizes though.
Not that it matters much, it’d be just bad for sizes like iPhone SE, but still … I would like to get it working.
Hey @pumpkin
Oh right, I missed the “mobile” bit.
The dropdown class gets a little over-ridden I think on mobile, so try something like (preserve space)
.nav-special .dropdown-item
If you are using the basic drop down option for the toggle, its a little different.
.dropdown-menu .dropdown-item
Basic Dropdown option? I didn’t know we had more than one 
I set the nav menu to none and added a few list items with links to make use of the flex options and set the links to open a dropdown.
Right, .dropdown-menu . dropdown-item lets me change the font size on the wider screen sizes, but not on the mobile. Adding text decoration or change the font shows on all devices. I might add that I added dropdown-men u and dropdown-item as single classes to change stuff. I’ll see what happened when I only use .dropdown-menu .dropdown item instead.
Nope, no success. Inspecting code in the inspector shows me, that there’s a class on top named
.nav-special.fullscreen-nav .nav .dropdown-menu > li > a
which sets a font-size of 28 px. I have no idea where the heck I set that within Blocs. At least not willingly or knowingly, nor how to change that within blocs.
I’d love to have an easier way, setting font-sizes for the full-screen (and probably even the sidebar) navigation. I personally don’t mind inspecting the webpage to find out what’s causing the issue and learn stuff this way, but if I didn’t, stuff like this would drive me mad and eventually away from Blocs.
@Norm Any chance for an easier way to do stuff like this in the future?
However, adding this class to the class editor does do the trick. Problem solved.
I’d still love to know, how that happened…
For the full screen nav, this should work
.nav-special .dropdown-item
For the most part the drop down links inherit the style from the Subclass Special Navigation Links. You really just need to target them for specific styling.
I wish it would. I can change the dropdown font to show uppercase and whatnot, but can’t change the font-size. It always get’s overwritten:
Its really just the nature of CSS, its being over-ridden.
Using this works for me.
.nav-special .dropdown-item
Make sure you dont have a double … at the beginning of the first class. (The class editor adds one)
Well yes, but WHY is it overwritten? Where did I (or Blocs) set the font-size to be 28px? I just checked the project settings, all classes that I used… nothing. It’s driving me nuts 
This is so strange. Just adding that class removes the green background from the navigation bar.
Here’s the project (assets not embedded) to try.
http://wildevoegel.fynndesign.de/wilde-voegel.bloc
If I just uncheck the font-size:28px in the inspector, the set navbar-item class works immediately.
Oh hang on,
Sorry, my mistake… I was using the sidebar style. Yeah the Full Screen one like to override everything on font size ?
Not ideal, but you can put this in the page header (change font size to suit)
<style>
.nav-special .dropdown-item {font-size: 1rem!important;}
</style>I dont know if this is because the Class Editor doesn’t support relational selectors yet. eg >
1 Like
No worries, I added the two very (!) specific classes for the fullscreen navigation that I found in the inspector. That works just as well. Or rather better, since I can specify font sizes for both (menu heading and dropdown item) for SM and XS breakpoints separately.
Thanks for double checking, Pete.
My pleasure. I learned so much thanks to people like @PeteSharp Pete and @Eldar and lots of others. It’s only fair to share what I learned while solving my problem 