By Andy on Wednesday, 29 November 2017
Posted in Vanilla
Replies 10
Likes 0
Views 0.9K
Votes 0
Hello. I've just switched my site across to Vanilla as the base template.

To ensure the main navigation remains on small device views, I've put a standard Menu module in the sidebar position (under the login form)

..but it's white text on white background and you can only see it if you mouseover it.

Without directly changing anything on my site, could you advise on the best approach for me here.. I'm thinking 1 of 3 things:

1) It's a bug with Vanilla that needs fixing
2) I should put some kind of code / adjustment in the module parameters (if so can you suggest what please?!)
3) I should put some kind of code in the Vanilla Custom CSS section (if so can you suggest what please?!)

Thanks!
Hey Andy,

This is actually the main reason why too many settings is a catch-22 situation. I have seen too many sites with template frameworks that ends up with such problems.

Generalizing a font color is going to be really tricky on a template because if there are any elements that has the same background color as the font, will eventually lead to the same problem.

My initial thoughts is to use the background color defined in https://monosnap.com/file/qdNCx2LXSqWb49fwMr8yLOtfquGqS0# to set the background color of that sidebar, but it's still going to be problematic, http://take.ms/pbcWlb

I think right now the best way is for you to add a custom css in vanilla to either reset the font color or change the background of the sidebar.

Assuming that you want to reset the font color on the sidebar,

[gist]
body .sidebar-element .nav.menu li > a,
body .sidebar-element .nav.menu li ul li a {
color: red !important;
}
[/gist]

Assuming that you want to reset the background on the sidebar,

[gist]
body .sidebar-element {
background: red;
}
[/gist]

Perhaps we could consider adding a sidebar background color settings in the future but to be honest, that would lead to another set of errors if they choose a background that is the same color of some of the text there
·
Wednesday, 29 November 2017 22:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Andy,

It seems you have set the preset for Text Color in the template to have white in color http://take.ms/ZYCrv
So it will effect the menu text that you've mention above.
You need to change it to change the color and temporary disable cache then temporary enable compile LESS to CSS http://take.ms/xR6sN
·
Wednesday, 29 November 2017 13:08
·
0 Likes
·
0 Votes
·
0 Comments
·
..but this is the same setting for the text on the main navigation bar - so a site that has a dark navigation bar (very common) needs to have white text... that's why I'm looking for a CSS solution to make it show in the white background of the sidebar (unless I've missed a setting that can change the background colour of the sidebar).
·
Wednesday, 29 November 2017 20:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Mark - Your CSS solutions provide the perfect answers and flexibility. Thanks so much.

As a general related point (raised in feature requests) I do think it's odd that Vanilla template doesn't offer a navigation menu to small screen users by default. I'm not sure users have realised this if they are working on large screen devices. As soon as the main nav bar collapses there is no longer any navigation. I've got around this of course by putting a menu module in the sidebar... but it would surely be nice to have the sidebar auto-generate the main navigation choice when that disappears on small screen size.
·
Thursday, 30 November 2017 00:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Hm, it should actually have a mobile menu when the screen is resized.
·
Thursday, 30 November 2017 01:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark - Based on my experiences with your demo site, and my own site, I don't think there is any mobile menu....
·
Thursday, 30 November 2017 05:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Will check with them on this.
·
Thursday, 30 November 2017 11:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Andy,

I just checked with them and it seems like you did not publish the module "Vanilla Sidebar". This module should be published automatically when you installed vanilla. Did you unpublish this module?

The Vanilla Sidebar module is a custom module that is used on vanilla that renders a unique sidebar with the site navigation (on mobile device)
·
Thursday, 30 November 2017 13:13
·
0 Likes
·
0 Votes
·
0 Comments
·
Ah ok - Thanks for checking on this. Yes I did unpublish that for some other reason. I'm tied up today but will investigate further now I know how things should work - and remind myself if I had any issues with that. If so I'll update here!
·
Friday, 01 December 2017 00:33
·
0 Likes
·
0 Votes
·
0 Comments
·
No problem Andy Basically, we wanted to give a more social-ish feel towards the sidebar by adding the user's cover etc and this is why we added the Vanilla sidebar module.
·
Friday, 01 December 2017 00:39
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post