Hi there,
I am using header style 10.
I would like the color behind my logo and the main menu to be #222222.
I have inserted the following css in the custom code section, but it is not adjusting the color of the sticky menu which is still black. What code do I need to ensure that is #222222 too?
.td-logo {
background-color: #222222;
}
.td-main-logo {
background-color: #222222;
}
.td-header-sp-logo {
background-color: #222222;
}
Also, on my homepage I would like to display a different image on the mobile version to the desktop version (I would like a large banner at the top of the page that when viewed on mobile would fill the whole screen). This is the image I am wanting to use for desktop: http://www.thesitdowncomedian.com/wp-content/uploads/2018/02/1920x1080v6.jpg but when viewed on mobile it is too small to read so I would like to insert a different image that fills the whole screen. What code (and where should I insert it) do I need to achieve this?
Cheers
Hi,
The background color of the header can be set in the theme panel, also the header menu and sticky menu background color
– https://www.screencast.com/t/w1LF7D4w
– https://www.screencast.com/t/0Fynig9t
Maybe those settings would be sufficient for what you want to do.
If that image is the logo, you can set a logo for desktop and a different one for mobiles
– https://www.screencast.com/t/ji3ZR8cD
Thanks
Hi there,
Thanks for your reply. The image that I want to display differently on mobile and desktop is not the logo. How can I do this?
Cheers
Ryan
Hi,
With the tagDiv composer you can hide elements per viewport. So for example you set two images in a page by an element of your choice
– http://prntscr.com/k0suh5
You can for example hide one of them for desktop and the other one for mobile. That way you can display different images
– https://www.screencast.com/t/nvj99nPg
– https://www.screencast.com/t/JV16zkgwgXRy
– https://www.screencast.com/t/oLXBD09yV9n
– https://www.screencast.com/t/PMG0cH34
I believe this what you want to do.
Thanks
Hi there,
I am still having no luck with changing the color of my Main Menu when it is “sticky”. I have set it to #222222 where you suggested: https://www.screencast.com/t/0Fynig9t
But it is still appearing as black (#000000).
Is there a way I can change this via the code?
Note: I am using header style 10 and this custom code:
.testpage .td-main-content-wrap {
padding-top: 1px !important;
}
.td-footer-instagram-container {
padding-top: 20px !important;
}
.td-logo {
background-color: #222222;
}
.td-main-logo {
background-color: #222222;
}
.td-header-sp-logo {
background-color: #222222;
}
So it is #222222 behind the logo, and behind the main menu when I load the page, but as soon as I scroll and the sticky menu appears, it is #000000.
Cheers
Ryan
Hi,
I have tested this again, using the same header style you are using. I set a background color for the menu when sticky
– https://www.screencast.com/t/a5DNdhcrpL
This color applies for me – https://www.screencast.com/t/yoZSZ47V
Do you maybe have caching installed? Clear the cache after setting the color, also clear the browser cache or try with a different browser.
That code you use would have no effect in this matter. Do you have a demo installed? demos may have custom code of their own.
Thanks
Hi Simion,
I’ve tried with a different browser and no luck.
Yes, I have Art Creek installed. How would I change the sticky menu color to #222222 with that installed?
Cheers
Ryan
Hi,
Just as I thought, the art creek demo has a color defined in it’s custom design for the menu when sticky
– https://www.screencast.com/t/UHO4P636G
So the theme panel setting does not apply. Please enter this code in Theme panel->Custom code->CSS section
.td-art-creek .td-header-style-10 .td-affix.td-header-menu-wrap {
background-color: #222222;
}
It will change the color of the sticky menu to the one you want
– https://www.screencast.com/t/rNFgpi9z9J
Thanks
