Jump to content

Double header menu

Recommended Posts

I logged into my site yesterday, and saw that our header menu is now doubled... (see ref pic) I have no idea why/how this has happened. I have spoken to customer support and they have said I need to disable custom scripts. Can anyone shed light on this for me please? At the same time, we had a custom font for our H1's - that's disappeared too...

Screenshot 2023-11-20 at 15.49.22.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Do you have anything in the Header Code Injection? If so can you post it here?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes - here's what's there; 

<!-- Split Section CSS from Will-Myers.com -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/splitSections@3/styles.min.css" id="wm-split-css">


<!-- Scrolling Website Images from Will-Myers.com -->
<link rel="stylesheet" id="website-mockup-css" href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/websiteMockupDisplay@1/styles.min.css">


<link id="wm-video-element-css" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/VideoElement@1/styles.min.css">
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'wg_a1bc31cedb26f2d2a05609ff8395edfd6'
    });
</script>

Link to comment

I can't see any issues there, but I would still suggest removing it, refreshing the page and then replacing it only if the error in the header is still there.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ok, thanks. I've just tried this, but it still looks the same. Is it only custom code in the header that could cause this? Would custom CSS cause this issue? It just seems funny that it's happened at exactly the same time our custom fonts disappeared. Last time this happened it was when Squarespace had an update. 

Is there anything else I could try? 

Link to comment

If you could share any code that you have added to the website that might help identify why this is happening.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sure - 

// Website custom fonts H1&H2 //
@font-face {font-family: Gelica_Bold; src:url(https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/642ecd469dfb5b75abb71505/1680788806415/Gelica-Bold.woff)}

h1 {font-family:'Gelica_Bold'!important;
letter-spacing: 0.01em;}

h2 {font-family:'Gelica_Bold'!important;
letter-spacing: 0.01em;}


// Blog Page Post Title //
.blog-title {
  font-family: Gelica_Bold !important;
}

// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: Gelica_Bold !important;
}

// Site Title //
.header-title-text a {
  font-family: Gelica_Bold !important;
}

// Cookie Icon For Cookie Banner (Light Theme) - Ghost //

.sqs-cookie-banner-v2:before {
  width: 40px;
  height: 40px;
  margin: 10px 0px 10px 8px;
  background: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/643244ea2c60610ca8607748/1681016042453/cookie_dark.png) center center no-repeat;
  background-size: contain;
  display: inline-block;
  content: "";
}


/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 2;
@actionSize: 350px; 
@logoSpacing: 2vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

#block-yui_3_17_2_1_1684143065515_3196{
--wm-plugin:websiteMockup;
}
/**
 * Scrolling Website Images
 * From Will-Myers
 */
.wm-website-mockup-block {
  --scroll-speed: 16s;
  --border-color: black;
  --border-thickness: 2px;
  --shadow: var(--medium);

  --mobile-arrow-thickness: 2px;
  --mobile-arrow-size: 10px;
  --mobile-arrow-color: white;
  --mobile-bkg-color: #ffffff;
  --mobile-bkg-opacity: 0.25;
  --scrollbar-width: 2px;
  --scrollbar-color: #333;
  --scrollbar-track: #ccc;

  --aspect-ratio: 16 / 9;
  --tablet-aspect-ratio: 3 / 4;
  --mobile-aspect-ratio: 3 / 4;

  --hover-scale: 2;
  --hover-speed: 0.8s;
  --hover-shadow: var(--medium);
}
/* ---- END ---- */

#block-yui_3_17_2_1_1684144367870_13797{
--wm-plugin:websiteMockup;
}
/**
 * Scrolling Website Images
 * From Will-Myers
 */
.wm-website-mockup-block {
  --scroll-speed: 16s;
  --border-color: black;
  --border-thickness: 2px;
  --shadow: var(--medium);

  --mobile-arrow-thickness: 2px;
  --mobile-arrow-size: 10px;
  --mobile-arrow-color: white;
  --mobile-bkg-color: #ffffff;
  --mobile-bkg-opacity: 0.25;
  --scrollbar-width: 2px;
  --scrollbar-color: #333;
  --scrollbar-track: #ccc;

  --aspect-ratio: 16 / 9;
  --tablet-aspect-ratio: 3 / 4;
  --mobile-aspect-ratio: 3 / 4;

  --hover-scale: 2;
  --hover-speed: 0.8s;
  --hover-shadow: var(--medium);
}
/* ---- END ---- */


#block-yui_3_17_2_1_1684145403876_4148{
--wm-plugin:websiteMockup;
}
/**
 * Scrolling Website Images
 * From Will-Myers
 */
.wm-website-mockup-block {
  --scroll-speed: 16s;
  --border-color: black;
  --border-thickness: 2px;
  --shadow: var(--medium);

  --mobile-arrow-thickness: 2px;
  --mobile-arrow-size: 10px;
  --mobile-arrow-color: white;
  --mobile-bkg-color: #ffffff;
  --mobile-bkg-opacity: 0.25;
  --scrollbar-width: 2px;
  --scrollbar-color: #333;
  --scrollbar-track: #ccc;

  --aspect-ratio: 16 / 9;
  --tablet-aspect-ratio: 3 / 4;
  --mobile-aspect-ratio: 3 / 4;

  --hover-scale: 2;
  --hover-speed: 0.8s;
  --hover-shadow: var(--medium);
}
/* ---- END ---- */


#block-yui_3_17_2_1_1684145625438_3579{
--wm-plugin:websiteMockup;
}
/**
 * Scrolling Website Images
 * From Will-Myers
 */
.wm-website-mockup-block {
  --scroll-speed: 16s;
  --border-color: black;
  --border-thickness: 2px;
  --shadow: var(--medium);

  --mobile-arrow-thickness: 2px;
  --mobile-arrow-size: 10px;
  --mobile-arrow-color: white;
  --mobile-bkg-color: #ffffff;
  --mobile-bkg-opacity: 0.25;
  --scrollbar-width: 2px;
  --scrollbar-color: #333;
  --scrollbar-track: #ccc;

  --aspect-ratio: 16 / 9;
  --tablet-aspect-ratio: 3 / 4;
  --mobile-aspect-ratio: 3 / 4;

  --hover-scale: 2;
  --hover-speed: 0.8s;
  --hover-shadow: var(--medium);
}
/* ---- END ---- */

/* Vertical Line */
.vertical-line {
  height: 100px; /* line height */
  width: 1px; /* line width */
  background: #fafafa; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

#block-yui_3_17_2_1_1684502781192_7018
{
--wm-plugin:websiteMockup;
}
/**
 * Scrolling Website Images
 * From Will-Myers
 */
.wm-website-mockup-block {
  --scroll-speed: 16s;
  --border-color: black;
  --border-thickness: 2px;
  --shadow: var(--medium);

  --mobile-arrow-thickness: 2px;
  --mobile-arrow-size: 10px;
  --mobile-arrow-color: white;
  --mobile-bkg-color: #ffffff;
  --mobile-bkg-opacity: 0.25;
  --scrollbar-width: 2px;
  --scrollbar-color: #333;
  --scrollbar-track: #ccc;

  --aspect-ratio: 16 / 9;
  --tablet-aspect-ratio: 3 / 4;
  --mobile-aspect-ratio: 3 / 4;

  --hover-scale: 2;
  --hover-speed: 0.8s;
  --hover-shadow: var(--medium);
}
/* ---- END ---- */

a.grid-item[href="/work/videography-brand-identity-development-website-design-gerallt-evans-metalcraft"] h3:after {
    content: "Gerallt Evans Metalcraft";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/explainer-video-website-design-motion-graphics-greendocs"] h3:after {
    content: "greendocs";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/re-brand-video-marketing-estate-agent-tlc-property-wales"] h3:after {
    content: "TLC Property";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/website-design-case-study-oakwill-flooring-north-wales"] h3:after {
    content: "Oakwill Flooring";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/animated-ident-app-qcast-london-motion-graphics"] h3:after {
    content: "QCast";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/logo-design-brand-develoment-video-marketing-wales"] h3:after {
    content: "Margarita Margherita";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/animated-logo-instagram-influencer-baby-led-eating"] h3:after {
    content: "Baby Led Eating";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/website-design-photographyvideography-pdq-northamptonshire"] h3:after {
    content: "PDQ Contract Flooring";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/animated-ident-sound-design-for-nft-platform-verse"] h3:after {
    content: "Verse";
    display: block;
    font-size: 26px;
}
a.grid-item[href="/work/videography-composing-soundtrack-mission-southstack-wales"] h3:after {
    content: "Oakwill Flooring";
    display: block;
    font-size: 26px;
}

h1 a, h2 a, h3 a, h4 a {
text-decoration: none !important;
}
 
p a {
text-decoration: none !important;
}


HOSTED FILES
mir ldn
https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/655753f7ce21532e0aa3a05d/1700221943173/MIR+LDN_Email+sig+logo.png

Yoke graphics for email sig
https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/6557568baedd1e6e5146e7be/1700222603821/MI+LDN+Logo-email+sig2.png


https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/6557bd6245f1f157cdc10550/1700248932026/Bouncing-Y_B%26W-v2_small.gif

https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/6557c44b84de84475a743c42/1700250699322/Yoke_Instagram+icon.png

https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/6557c44be135f1525105d4c1/1700250699311/Yoke_Youtube+icon.png

https://static1.squarespace.com/static/642dcb2550586d096be3684b/t/6557c44b5b8dcd3d42653ac0/1700250699350/Yoke_Linkedin+icon.png

Link to comment

The code above is in custom CSS. 

This is in the footer: 

<!-- Split Section Javascript from Will-Myers.com -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/splitSections@3/javascript.min.js"></script>

<!-- Split Nav Code schwartz-edmisten.com -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const headerTitleNavWrapper = document.querySelector(".header-layout-branding-center-nav-center .header-title-nav-wrapper");const headerNav = document.querySelector(".header-layout-branding-center-nav-center .header-nav");const clonedHeaderNav = headerNav.cloneNode(true); headerTitleNavWrapper.prepend(clonedHeaderNav);setTimeout(function(){ headerTitleNavWrapper.classList.add('has-nav'); }, 200);
});
</script>
<!-- end Split Nav Code schwartz-edmisten.com -->

<!-- Scrolling Website Images from Will-Myers.com -->
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/websiteMockupDisplay@1/javascript.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/VideoElement@1/javascript.min.js"></script>

Link to comment
1 hour ago, Madz07 said:

<!-- Split Nav Code schwartz-edmisten.com -->

1 hour ago, Madz07 said:

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/

You have code in both the Footer and CSS for a split navigation, but that doesn't appear to be working correctly. After backing this code up in a note, I would suggest removing all of the split nav code, and see how that affects the design.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.