Header color change

Support
#1

Hi there,

i want to change the header colour in x-theme.

The site is below

The code .x-navbar {
background-color: #2c3f96;
}

doesn’t work. What can i do?

Thanks :slight_smile:

Best regards
ASAP

#2

Hi ASAP,

Please try this code:

.x-navbar {
    background-color: #2c3f96 !important;
}

Hope this helps.

#3

Hi,

its not working. :frowning:

#4

Hi there,

Please try:

.masthead .x-navbar-wrap .x-navbar {
    background-color: #2c3f96 !important;
}

Hope this helps.

#5

Perfect. It works. :slight_smile: THanks a lot.

What should I do for the footer?

greetz

#6

Hello Greetz,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS to change footer background color:

.x-colophon.bottom {
    background-color: #777474;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#7

Thanks for the links. I will check it out. But the code for the footer doesnt work. ;(

#8

Hello @patsorules,

Thanks for updating the thread.

Above code is working fine on my end. Can you please try adding following CSS:

body footer.x-colophon.bottom {background-color: #777474 !important;}

Please change color code as per your requirement.

Let us know how it goes.

Thanks.

#9

Thanks so much.
for the time being my last question: Now the font and the social media logos are not visible, so I have to change the colour. Can you give me the code?

#10

Hello @patsorules,

Thanks for updating the thread. :slight_smile:

Looks like you changed the background color to White. To change the link and social media color, please add following CSS under X > Theme Options > CSS:

body footer.x-colophon.bottom .x-social-global a {
    color: #444;
}

body footer.x-colophon.bottom .x-nav li a {
    color: #151515;
}

body footer.x-colophon.bottom .x-colophon-content p, body footer.x-colophon.bottom .x-colophon-content a {
    color: #151515;
}

Please change the color code as per your requirement.

Thanks.

#11

Thanks all work fine. But the backround from the menu and the font of the menĂĽ is now not visible.
Would it be possible to delete the hoover color and make the droopdown backround more natural?

#12

Hi,

To change the hover color of your menu, you can add this in Theme Options > CSS

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
   color:red;
}

You may change red to any color you like.

Thanks

#13

It doesnt work fine. If I scroll on the menu, I see nothing. Its because the standard colour (not hoover) is black and the backround of the menu is black. I want the backround white and the standard colour of the menu items (not the hoover colour) in black.

Thanks
Asap

#14

Hi There,

Please also add this custom CSS:

.x-navbar.x-navbar-fixed-top{
    background-color: #000;
}

If it doesn’t work, please provide us with your admin account so we can take a closer look.

Thank you.

#15

I write :
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
color:red;
}
.x-navbar.x-navbar-fixed-top{
background-color: #000;
}

in the CSS. Nothing changes…
Sorry :frowning:

Edit: The problem is, that the font is “invisible”. I can see it if I hoovoer over it. But it should be visible in Black when I open the menu

#16

Hi There,

Your website in under construction mode.

Would you mind providing us with your admin account so we can take a closer look?

Thank you.

#18

Okay below the infos. :slight_smile:

#19

Hi there,

I have just checked your site but I don’t see any related code in the Global CSS relating to the customizations you have added based on this thread so I am a bit confused what you are trying to do now.

If it is about the text under the dropdown menu that blends with the dark background color, please try to add this code:

.desktop .sub-menu li > a span {
    color: #fff;
}

Hope this helps.

#20

Thank you so much. All works fine for the moment.

Best regards.

#21

You’re welcome.