TheBoldCopy

Hi,

I have just had a client's site go live and one of the pieces of code I used isn't working. It was working in edit mode but not now the site has gone live.

It was basically meant to show images and when you hover over the image on the desktop, the text will appear over it.

The code that I used was this:

@media only screen and (min-width: 640px){ 
#block-yui_3_17_2_1_1676200223768_660389 { 
opacity: 0; 
transition: opacity 1s 
} 

#block-yui_3_17_2_1_1676200223768_660389:hover { 
opacity: 1; 
transition: opacity 1s 
} 
}
 

Here is one of the pages with the issue: https://www.elmgray.com/meet-the-team

If anyone would be able to advise, I'd be very grateful!

Thanks 🙂 

Hey,

Not sure if someone could help me with the mobile navigation on my client's site.

As I've done a couple of mega menus from the desktop navigation using folders, the folders are appearing in the mobile navigation but they only have one sub-item so it looks a bit strange.

Any ideas would be greatly appreciated!

https://ferret-fife-hexd.squarespace.com/

Password: Elmgray

Thanks 🙂

@Ziggy That's worked perfectly!

Thank you so much 🙂

Hey,

The URL is: https://moose-banjo-8fc4.squarespace.com/

 Password123

The code I've used on the site so far is:

// Hamburger Menu for desktop //
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
// Show overlay mobile menu //
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

// Header - Show social icons //
.header-actions.header-actions--right {
    display: flex !important;
}

.header-nav {visibility:hidden!important}
  
  .header .header-burger {
    order: 1 !important;
}

.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

  .burger-inner>div {
      background-color: #e82a2a
      !important;
  }

.header-menu-bg {background: #ede0c7!important;
}

//Hamburger Menu Text//
.header-menu-nav-item a {
    color: #e82a2a!important;
}

//Hamburger Menu Socials//
.header-menu-actions a {
    color: #e82a2a!important;
}

.header--menu-open .header-menu a {
  margin: 0;
  padding: 10px 20px !important;
  line-height: 1 !important;
}

// Shrinking Logo On Scroll - 7.1 //

.header.shrink img {
    max-width: 120px;
    transition: all 0.2s ease-in-out
}

.header img {
    transition: all 0.2s ease-in-out
}

section[data-section-id="63fe4ff991a66f3ef8935a4e"]{
  background-color:#f8b7b7;
  @media(min-width:767px){
    .section-border{
      width:90%;
      margin-left:10%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }
  }
  @media(max-width:767px){
    display:block;
    .section-border, .content-wrapper{
      position:relative;
    }
    .section-border{
      height:200px;
    }
  }
}

Hi,

I would like to move the hamburger menu so it's central to the pink side block.

Also, is there a way to make the lines of the hamburger menu slightly thicker?

Password: Password123

Thanks!