Changing menu bar colour & removing read more button in Himalayas theme

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Hi Paul,

You can achieve what you’re after by adding following custom CSS to your theme using Advanced CSS Editor, for the sake of simplicity.

.slider-readmore {
    display: none;
}

.transparent .header-wrapper.stick, .non-transparent .header-wrapper.stick{
    background-color: #bee;
}

Feel free to replace the HEX code until it fits your needs. Hope it helps ??

It worked Suyogya! thank you so much mate – all it needed was a working CSS editor, such as the one you proposed. Beers on me if you are ever in Greece

Hey Paul,

Glad it worked. Please mark this topic as resolved. And thank you for offering me the beer! Cheers ??

Dear Gents,

I do have one more question though:

1. How can I change the colour and size of the font i am using in the navigation menu in the header?

Again, I deeply appreciate your help.

Paul

Hi Paul,

You can add following custom CSS in Advanced CSS Editor:

#site-navigation .menu li a{
    color: #000;
    font-size:20px;
}

Feel free to change the HEX code and font-size until it fits your needs. Hope it helps.

Hi guys, i’ve been having the same problems, with these theme. I install the plugin you mentioned, but don′t know what code use to get the sticky menu bar to be white and the font color purple. Please help me

Thanks.

Sorry for my english, it′s not my nature language

Hey there,

As per forum welcome, you’re required to create your own thread instead of posting in an older one. Hope you understand.

Dear Suyogya,

After completing the new changes, a few small problems have arose:

1. After making the font to the color of my choice, I need to convert the color of the transparent header menu bar to white – is this possible?

2. Making white the resized menu bar, the new font is not showing (with its new blue colour). Can the font colour be changed on the resized menu bar?

3. After making white the background color of the header menu bar, is it possible to add a small shadow effect to the bar?

You assistance is of immense help to myself – I have just started learning CSS at treehouse in order not to bother you much, but I am still at a very early level to pull these changes alone. As far as I understand, in the advanced css area we calling ID and CLASS selectors from the <style> section of our HMTL. If we wanted to create a new element, for example the shadow above, I would have to edit the HTML to add the shadow and then edit it from the CSS area in the customiser?

Thank you so much again – seriously if I can contribute to your work just let me know. The website I am currently making is for a non-profit organization in Greece.

All the extra CSS I have added with the plugin you mentioned are as follows:

.transparent .header-wrapper, .non-transparent .header-wrapper {
background: #FFFFFF none repeat scroll 0 0;
}

.transparent .header-wrapper.stick, .non-transparent .header-wrapper.stick{
background-color: #FFFFFF;
display: inline;
}

#site-navigation .menu li a{
color: #003E7E;
font-size: 18px;
font-weight: 500;
}

.slider-readmore {
display: none;
}

.copyright {
display: none;

.header-wrapper.stick, .non-transparent .header-wrapper.stick{
background-color: #FFFFFF;
display: inline;
}

Hi Paul,

Please add following custom CSS in Advanced CSS Editor:

.home.transparent .header-wrapper {
    background: #FFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#site-navigation .menu li a {
    color: #000;
}

Glad that you started learning this. All of your CSS is stored in a file called “style.css”, which is in your theme’s directory. You can just add relevant property in the existing element. Hope it makes sense ??

Managed to pull off all the changes! Thank you mate – I will now mark the thread as resolved.

Best of luck on your coding,

Paul

Hi Paul,

Glad I was able to help. Cheers ??

Hi guys
Happy New Year!
Thank you very much for your classy support and great conversation on this post! I am also 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: https://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 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