add custom secondary navigation on squarespace website 7.1 with custom html css and javascript/jquery by jishaansinghal

Add secondary navigation on Squarespace website 7.1 with custom HTML CSS and javascript/jquery by jishaansinghal. This code uses a CSS, Header Injection, and Footer editor and works with Squarespace 7.1

In this video, I'm showing you how to add custom secondary navigation on Squarespace website 7.1 with custom Code!
You can change the background color which you wanted.

This code uses CSS, Header Injection, and Footer editor Copy and paste the code below into the editor box.
--------------------------------------------------------------------------------------------------------


//add custom secondary navigation on Squarespace website 7.1 //

//COPY AND PASTE THIS CODE ON CSS EDITOR//

@media only screen and (min-width: 641px){

  .main-wrapper-secondary-wrapper *{

    display:flex;

    max-width:100%;

    background:#16E;

    color:#000;

    padding:0 12px;

  }

}

  .main-wrapper-secondary-wrapper *{

    max-width:100%;

    background:#16E;

  }

--------------------------------------------------------------------------------------------------------

//COPY AND PASTE THIS CODE ON HEADER CODE INJECTION EDITOR//

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>

--------------------------------------------------------------------------------------------------------

//COPY AND PASTE THIS CODE ON FOOTER CODE INJECTION EDITOR//

<script>

  $(document).ready(function() {

    $('.header-announcement-bar-wrapper').before('<div class="main-wrapper-secondary-wrapper"><div class="contcts-email-phone"><p><i class="fas fa-envelope"></i>Email: <a href="mailto:jishaanwm21@gmail.com">jishaanwm21@gmail.com</a></p><p><i class="fas fa-blender-phone"></i>Phone: <a href="01877258530">01877258530</a></p></div></div>');

  });

</script>

--------------------------------------------------------------------------------------------------------

If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:

Connect/Contact with me here

Fiverr       : https://www.fiverr.com/jishaansinghal

Youtube    : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ

Facebook  : https://www.facebook.com/jishaan.singhal

Twitter      : twitter.com/jishaan_singhal

Instagram : https://www.instagram.com/jishaansinghal

Linkedin    : https://www.linkedin.com/in/jishaan-singhal-1b77b2203

Blogger      : https://jishaansinghal.blogspot.com

Email         : jishaanwm21@gmail.com

Keywords: custom secondary nav, second nav, squarespace 7.1, text issues squarespace,how to fix text issues in squarespace,fixing the text in squarespace,squarespace text block,text block squarespace,squarespace text editor,squarespace,how to use Squarespace,squarespace tutorial,squarespace tutorial for beginners,how to use Squarespace 2018,how to add text squarespace,text spacing issue squarespace,Solopreneur Sidekick #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #2021 #2020#2022,squarespacewebsitedesign,squarespace,css,jishaansinghal,designer,jquery,squarespacewebsite,customcss,design,announcementbar,squarespacewebsitedesigner,animated,html,fiverr,codecheatsheet

"JISHAANSINGHAL"