In Blocs for Mac 5.1 we have updated how link colours work within the navigation drop downs. Previously they would be set to whichever colour you set the normal navigation link colours when using the Global Swatch options in the sidebar.
However, this could be problematic because, lets say you set the navigation Bloc to have a dark background with white navigation links. In older versions of Blocs, you would find that your navigation dropdown links would now be white against the white background bubble of a drop down menu. They basically become invisible, kinda like this .
There is a brand new theme option in Blocs 5.1 that can be set at the Bloc level to theme your navigations drop down bubbles dark or light, this also takes care of dropdown link colours.
I want custom dropdown link colours
If you really want to go wild and set the link colours to something other than dark or light in the dropdown menus, you can put the following code into the Blocs Code Editor in the Additional CSS zone and set the drop down link colour that way.
Please note, pay attention to the note above each bit of code regarding the theme.
/* Default Bootstrap Theme*/
nav .dropdown-menu .nav-link:not(.blocsapp-special-menu .nav-link)
{
color: red!important;
}
/* Dark Bootstrap Theme - Use this for dark theme dropdown menus */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link:not(.blocsapp-special-menu .nav-link)
{
color: red!important;
}
/* Light Bootstrap Theme - Use this for light theme dropdown menus */
[data-bs-theme="light"] nav .dropdown-menu .nav-link:not(.blocsapp-special-menu .nav-link)
{
color: red!important;
}
Hi @Norm - wouldnāt a colour select under theme be a better option where we can select global colour styles from and also select our own colours? with iPad and the average user will this be a headache - the less CSS the better.
Or is Bootstrap forcing this?..if so cant you override it with some wizardry!?
My personal advice would be donāt mess with dropdown link colours, itās better design to use set options and takes accessibility into consideration.
But sure, you can always add more options to pretty much any part of design.
Itās also worth noting, these themes are not limited to navigation dropdown links they are now part of Bootstrap and effect a range of the user interface when used. Maybe a separate theme editing window would make more sense, but this is probably the opposite to making it easier to use
Moving forward this isnāt a problem - as explanation or how things will be is ok.
What I do have at the moment is a streaming site where the drop down text is purple in a white box on desk top and then on when its on the toggle/hamburger on the smaller breakpoints they have a purple background with a light grey text or sometimes they have this in Yellow depending on the stream sponsor.
So a class for breakpoint colour is not an option now? - just will mean I use the current Blocs for this website if anything, which is not an issue.
I removed the custom class and changed the code to set the theme as āDarkā and the text color as āwhiteā, but the text didnāt turn white. Additionally, I bought this app because I was intrigued by the āno codeā concept during the purchase. Please make the necessary improvements so that menu settings can be properly configured without requiring any additional code modifications.
Furthermore, I would like the inclusion of āflip-zā in the menu to be properly implemented. With the current situation, I feel that there are increasing concerns that need to be addressed, and it becomes necessary to pay attention to them.
On 5.1.0
I do get this, but when a client says they want it pink on desk top and orange on mobile etcā¦ā¦thatās what it has to beā¦.Iāll have to find a code route to do this when it crops up.
Iāll have a play around with it and Iāll replicate that menu I have with 2 colours and send you that. I canāt send the actual site out as I have signed an NDA on the actual site as itās all passworded etc
Hey guys, new Blocs user here. I was building a website and tried to change the text color of the dropdown menu items, but I really couldnāt work out how to do so. Those elements donāt have classes assigned, and changing the bootstrap theme doesnāt change anything either.
These items are pretty hard to see if they arenāt as white as the regular items outside the dropdown area. Any idea how to fix this? Thanks in advance!
I havenāt yet tried it, as not downloaded the latest version yet.
This will be a @Norm assist Iām afraid. I do think this will catch a few people out, but Norm is great at sorting things so he will have a solution for you on this.
Good luck - and please post your results so we can see how you did in on the thread of this post for future reference.
This will not set the background colour to white, you see the part that says color, that will only effect the text. To set the background colour, it would require background-color instead of color.
This will only work if you have the theme set to default. If you use the dark theme, then you will need to add [data-bs-theme=ādarkā] at the start of the class name like so.
/* Dark Bootstrap Theme - Use this for dark theme dropdown menus */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link:not(.blocsapp-special-menu .nav-link)
{
color: red!important;
}
The menu can be properly configured, we offer light and dark variations for drop downs that require no code. If you want to go deeper and customise further, its possible, but you will have to use alternatives to the no code options available.
Thanks @Norm, I have added this code (except of exchanged red with white) to my custom CSS but the color of the menu item is still very much gray. There was no change, unfortunately.
PS: I wanted to add more screenshots, but I was restricted to only including one. What I wanted to show was that I have the theme set to ādarkā on bloc level, and the still gray text.
You need to correct the āā characters. Those are smart quotes, browsers can change those characters.
Try this one:
/* Dark Bootstrap Theme - Use this for dark theme dropdown menus */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link:not(.blocsapp-special-menu .nav-link)
{
color: red!important;
}
.
