Changing mobile menu bar color, plus additional css customizations

Hi guys
Happy New Year!
I am a css newbie and thus have not much experience in css. Could you possibly help me with some settings and customization? I’d be really grateful!
I use the following site: http://www.swissdetektive.ch
I have already customized the menu bar with the following css:
.transparent .header-wrapper, .non-transparent .header-wrapper {
background: #ffffff none repeat scroll 0 0;
}
#site-navigation .menu li a {
color: #000000;
}
#site-navigation .menu li a {font-size:18px ; font-weight: bold ; }
.transparent .header-wrapper.stick, .non-transparent .header-wrapper.stick {
background: white none repeat scroll 0 0;
}
.header-wrapper.stick #site-navigation .menu li a, .header-wrapper.no-slider #site-navigation .menu li a {
color: black;
}
However, when i visit the website on my cellphone or the a tablet, the font menu turns white and is not visible anymore (more precisely the menu icon on the mobile view). Do you know a solution? Maybe it is possible to manually select the mobile view menu and force the font color. Maybe you have another idea 🙂
Second, i would like to style up the “gallery”/”portfolio” style (called “Detektiv-Ausbildung” on my website). Currently it is display as a image gallery with title, text, image enlarge button and functionality, and view page button. Furthermore, it is aligned in a 4 items view (on my resolution mac book – certainly different on bigger screens).
1) First of all, i would like to remove the image enlarge button and functionality, view page button and the text (under the title), so only the title will be displayed when hovering over an item. Do you know the custom code for that functionality?
2) Second, i would like to have more space between the items (gallery / portfolio) and maybe switch to a 2 items or 3 items grid display. Currently the items are all squeezed next to each other, however it would be nicer if they would be standing by themselves and would have more space between them. Is this possible and do you know how to tackle that issue? As far as i could tell, @antaeusgr (closed post: https://wordpress.org/support/topic/changing-menu-bar-colour-removing-read-more-button-in-himalayas-theme/#post-8607549) did some similar at his website.
3) Third, i would like to add another, a second, “gallery”/”portfolio” which displays different items then the one above, resp. before. This means, that i can display different items to different services. E.g. “gallery”/”portfolio” 1 called “Education” – displays 3 offerings, “gallery”/”portfolio 2 called “workshops” – displays 6 workshops available.
Since the Himalayas theme uses single pages with a page setting as portfolio, it might be possible to define a different portfolios and allocate pages by a page attribute to one of the portfolios?
Do you have an idea of how this could be done?
Thank you very much for all your help in advance!
A great start into the new year
regards,
hurera