Nova

www.furniture28.com I have made it public, but its not finished. And thank you!

I tried adding code to have my site header function similar to rh.com

The problem I am having is that on certain pages, for example the contact us page, or the mobile menu and other pages my site header is invisible. On desktop, I changed the menu to turn to hamburger on smaller screens but the hamburger menu does not turn black on hover like the furniture 28 header/logo and menu items. Also, when I scroll the header background turns back. Is there any fix for this or should I just start over? 

This is the code I used:

/* Nav item hover color - underline */
.header-nav-item a:hover { text-decoration: underline; 
}  
.header-nav-folder-content {
   background: white !important;
}
nav.header-menu-nav-list *:hover {
    color: gray !important; 
}
.header-menu-nav-item a {
  font-size: 22px;
}
header#header:hover {
  background-color: white !important;
}
// Header Nav Width Adjustment
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 2 0 100%;
}
.header-layout-branding-center-nav-center .header-actions--right {
  position: relative !important;
  right: 4vw;
}
/* Default styles for the burger menu icon */
.burger-icon {
  display: none; /* hide by default */
}

/* Styles for the navigation menu */
nav {
  /* Your navigation menu styles */
}

/* Media query for medium screens */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Show the burger menu icon */
  .burger-icon {
    display: block;
  }

  /* Hide the navigation menu */
  nav {
    display: none;
  }

  /* Styles for the burger menu icon when clicked */
  .burger-icon.clicked {
    /* Your burger menu styles */
  }
}
// Center Site Title //

@media only screen and (max-width: 640px) { .header-title-text {
    width: 75% !important;
    text-align: center !important;
}
}
body:not( .collection-type-products ) #header:hover a,
body:not( .collection-type-products ) #header:hover img,
body:not( .collection-type-products ) #header:hover svg
{
filter: invert(1);
}

super cool thank you!!

I have this code put on in my custom css, which makes my header nav and title turn from white to black on hover.

#header:hover a,

#header:hover img,

#header:hover svg {

filter: invert(1);

}

But on my product page where the font is already black, it causes it to turn white on a white background. How do I keep my header from inverting on product pages?

Whoa! Super cool ur the bomb! thank you! it works perfect.

The only thing that didn't change is that, I made it so when the screen is small instead of stacking the nav it turns into a hamburger. the hamburger did not change color and blends in do you know how to change that too?

I would like my header to function like rh.com when it comes to hovering on the header and having the text and background change color.

I have figured out most of the changes,  but I can not find how to change the color of all the text, site title and icons when I hover.

When you start out the text is white with adaptive header, when I hover on header the background changes white, but I can not figure out how to change the color, to black so it is visible, on all the nav text, site title and icons when I hover anywhere on the header. 

Can anyone help? Please :)