Change logo and colour of nav on homepage only?

Hi there,

Is it possible to change the colour of the logo and the navigation/social media on the homepage only? I ask because I'd like to change the background image from time to time. At the moment the black-on-white works fine but if I change the image to a darker one, I'd like to be able to reverse the colours of the navigation etc for standout.

www.peterotoole.ie

Thanks!

Add to Design > Custom CSS

/* Homepage Header */
body.homepage header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/05/28/13/15/helicopter-8023696_640.jpg);
}
body.homepage div.header-nav-item a {
    color: #f1f !important;
}
body.homepage header#header svg {
    fill: #f1f;
}

On 6/9/2023 at 5:35 AM, tuanphan said:

Add to Design > Custom CSS

/* Homepage Header */
body.homepage header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/05/28/13/15/helicopter-8023696_640.jpg);
}
body.homepage div.header-nav-item a {
    color: #f1f !important;
}
body.homepage header#header svg {
    fill: #f1f;
}

 

Thanks for this Tuanphan!  The only thing is the mobile navigation '+' menu icon is still the darker colour as you can see in the screenshot below. Can I change this to white as well, please? Thanks

Add this code under

body.homepage .burger-inner>div {
    background-color: white !important;
}

hi Tuanphan, thanks for that. Only 1 small issue, the shopping cart icon has an outline and is visible on the mobile menu as you can see below. Any way to fix this? Thanks!

thanks so much! you're fantastic!!