Jump to content

Moving social links bar into header nav wrapper

Go to solution Solved by tuanphan,

Recommended Posts

Hi! I'm trying to include the social links into the actual nav wrapper so it's all in this floating navigation bar. The code I'm using for the nav bar is below and I have a photo of what it looks like when I toggle the option to show the social icons and a screen capture of the design I'm going for. pw is wee. Thank you! 

Quote

//floating nav wrapper
.header-nav-wrapper {
align: center;
padding: 0.5vw;
border-radius: 50px;
border: 1px solid #000000;
background: #f2ecd2;
width: 90vw;
}

 

Screen Shot 2024-02-29 at 9.12.58 AM.png

Screen Shot 2024-02-29 at 9.13.21 AM.png

Link to comment
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 3/16/2024 at 3:29 AM, HeyItsGeri said:

Hi @tuanphan! Sorry I missed your notification. The website is https://weefarms.squarespace.com/ pw: wee

 

Thank you!

With Business Plan/higher, can you enable Social Icons? We can use code to move it into nav bar

With Personal Plan, my idea is add 3 items to last nav bar, then use CSS code to turn nav bar text to 3 social icons

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 3/18/2024 at 11:41 PM, HeyItsGeri said:

@tuanphan yes it will be a business plan. 

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop .header-actions.header-actions--left').appendTo('nav.header-nav-list');
})
</script>
<style>
  nav.header-nav-list {
    flex-wrap: nowrap;
}
  .header-actions.header-actions--left {
    margin-left: 2.5vw;
}
</style>

image.thumb.png.0e0375c39e60614faaf9a878998bd9ea.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.