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 :)