Change logo and nav menu colour on one page (homepage only)

Site URL: https://dekanstudios.com/home

Hi there - I would like to change the colour of my logo and navigation menu but only on my homepage - on both mobile and desktop.

I have added a custom font to my css so that my logo is the 'font' rather than uploaded a logo image - hope that makes sense.

Thanks in advance

Add to /home Page Header (DO NOT ADD TO CUSTOM CSS)

<style>
  a#site-title {
    color: white;
}
span.Cart-inner, span.Cart-inner *, span.Cart-inner:before {
    color: white !important;
}
</style>

Ah thank you so much @tuanphan - works perfectly. It works on mobile too, however it doesn't change the hamburger colour to white on mobile, could you please help me with come code so the hamburger is white on the homepage on mobile.

Thanks a bunch.

13 minutes ago, abbyleebonny said:

Ah thank you so much @tuanphan - works perfectly. It works on mobile too, however it doesn't change the hamburger colour to white on mobile, could you please help me with come code so the hamburger is white on the homepage on mobile.

 

Thanks a bunch.

Use new code

<style>
  a#site-title {
    color: white;
}
span.Cart-inner, span.Cart-inner *, span.Cart-inner:before {
    color: white !important;
}
  .burger-inner>div {
    background-color: white !important;
}
</style>

Thank you so much @tuanphan - I've got another couple for you...

1. On mobile homepage I would like the title/menu nav etc to be white as you have helped me with but I would like it to be black once they have opened the menu. see screenshots attached.

2. Can I reduce the size of the menu "X" button so it is smaller (and black)?

3. I have uploaded a custom font, however on the site, including when I go from homepage to menu the custom font seems to lag and for a split second the allocated Squarespace font shows up before the custom font shows.

4. I would like to reduce the cart text and quantity size on mobile only so that it shows on the same line if i change it to .8em it fits on one line but is too small for desktop - I have used the code here to change the shopping car picture to the word 'cart' :

//CART FROM ICON TO WORD//
   .header .header-actions-action--cart .icon {
    
      height : unset;
      width : unset;
      
      }
      
    .icon-cart-quantity {
    
      all : unset;
      
      }
      
    .Cart-inner .icon--cart { /* remove cart icon */ 
    
      display : none;
      
      }
      
  .Cart-inner { /* common settings */
  
    font-family : 'Univers+LT+55+Roman.ttf';
    color : #151515 ;
    font-weight : 400;
    line-height : 1.3;
    letter-spacing : 0.00;
    font-size : .9em;
    vertical-align : middle;
    content: "CART";

    }
    
  // CART QUANTITY // 
  
    .icon-cart-quantity {
    
      background-color : ;
      padding : px;
      
      }
    
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
    
      color : ;
         font-weight : 400;
    letter-spacing : 0.0em;
          font-size : .9em;
    margin-right : 0.5em;
      }
  
//CART TEXT//
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.00em;
        font-size : .9em;
    margin-right : 0.5em;
  }

#1. Page Header

<style>
  div.header-nav-item a {
    color: white !important;
}
</style>

#2. Add to Design > Custom CSS

/* X Size */
body.header--menu-open .top-bun {
    width: 20px !important;
}
body.header--menu-open .bottom-bun {
    width: 20px !important;
}

#3. Where did you add custom font code? Which code did you add?

#4. I see they already same line. Did you solve it?