Change color of top menu

[gianolio]

Hello, I would like to change the color of the top menu but only on the home page
of the site
https://genhet.web.cern.ch
and get it black

Can you help me ?
Elena

[pkatyaya]

Hey Elena,

I see that it is a Landing Page content type. You can easily change the background of the webpage from this image to any-other colour (Black in your case). To meet your requirement you can follow up with the following steps :

• Edit the page

• Go to components

• Under Components, Edit the first Section.
  

  

• In there go to Background

• Change the Background Type (From Image to Color)

• Choose the colour you wish to implement

• SAVE

This will change the header of your Landing Page to the new design you wish for.

I hope this delivers on the query.

Regards,
Prakhar

[gianolio]

Dear Prakhar,
thanks a lot for your prompt answer but,
I did maybe express myself badly, but I do not want to change the background color but the text color of the menu
In other worlds I would like to have “home” “about us” "activities in black and not in white as on the image it is impossible to read them correctly …
to change the image is apparently not an option

[jonixon]

Hi Elena,

You can always tick the ‘Has veil’ option to make the background image darker and therefore the white text easier to read. I did the same on the BE-OP website.

Cheers,
Jon

[pkatyaya]

Hey,

I get the issue now, since you are using the CERN override theme you need to do the changes to the CSS in your theme to fetch the desired output.

You should add the following block of code into your theme.css

header .navbar-default .navbar-nav > li > a {
color: black;
}

Refer to the Screenshot here (from inspect):

NOTE : Any work done in the CERN Override must be continuously maintained to ensure compatibility with future PHP and Drupal changes.

I hope this helps you.

Cheers,
Prakhar

[gianolio]

Dear Prakhar
I apologize but either I misunderstood where I should put the code you suggest or it does not work
here what I did

[gianolio]

Dear Jon, where can I do it ?

[joachim]

Hi Elena

You have already achieved what you wanted to. Please refresh your page.

If you want to edit the shadow (which is what makes the text look blurry), you will have to add additional CSS.

Thanks!

[pkatyaya]

Hey,

I see that you missed a “.” before navbar. It should be .navbar since it is a class and a class in CSS is called by "."

You can go to theme.css and in there you can put this code under “.header-wrapper”. For Example look at this attachment below :

I hope this helps.

Regards,
Prakhar

[gianolio]

thank you Joachim but this indeed seems to work for Firefox and not for Safari (that I am using)

[gianolio]

Dear Joachim
just forget my comment … I just open a new “private window” and it works for Safari too
Thanks a lot
Elena

[jonixon]

It’s in the window where you add the background image. It cn be seen in the screenshots in Prakhar’s first reply.

Seems like you got it sortet anyway!