Jump to content

How do I fix the site header from inverting?

Recommended Posts

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);
}

Link to comment
  • Replies 2
  • Views 591
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.