Jump to content

Version 7 Sidebar Navigation Customization

Recommended Posts

Site URL: https://vhart.squarespace.com/

Hello, I am having trouble making a sidebar navigation menu look nice with CSS. @tuanphan helped me change the menu's background color, but I need further expert guidance on adjusting spacing and alignment if possible.

I would like to customize the "Wells" template to make its sidebar navigation menu look like the "Supply" template's sidebar navigation.

I've attached two screenshots to show the difference in the two templates. Do you know of a way to expand the "Wells" menu to make it fill the left column like it does on "Supply"? 

I would just use "Supply" but it has this strange, asymmetrical sidebar on the right side of the screen on all non-home pages. Any help would be greatly appreciated!

Supply Menu.png

Wells Menu.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

You just want to add hamburger icon or fix the style of it on mobile?
If you want first just need to add a few CSS and JS.
But If you fix it completely need to custom code on it. Sorry it has some code. If you want to order a custom work please let me know via DM or Skype: LeopoldJobs

Please let me know about your decision!
Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Hi,

Insert this code in your Header Code Injection.

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

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#mobileMenuLink ul li.active-link').html('<i class="fas fa-bars"></i>');
});
</script>

 

Insert this code in Design -> Custom CSS

#mobileMenuLink ul li.active-link i.fa-bars{margin-top: 40px;width: 40px;height: 40px;z-index: 999;color: white;font-size: 27px;margin-right: 20px;}

 

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 4 weeks later...
  • 2 weeks later...
On 9/4/2020 at 8:53 AM, IXStudio said:

Hi,

Insert this code in your Header Code Injection.


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

Insert this code in your Footer Code Injection.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#mobileMenuLink ul li.active-link').html('<i class="fas fa-bars"></i>');
});
</script>

 

Insert this code in Design -> Custom CSS


#mobileMenuLink ul li.active-link i.fa-bars{margin-top: 40px;width: 40px;height: 40px;z-index: 999;color: white;font-size: 27px;margin-right: 20px;}

 

Please use the like button if it helps you!

Best,
Leopold

Hi @tuanphan, the above code makes a hamburger icon, but it does not work. Are you able to determine why?

 

Thank you for all of your help!

 

Link to comment

Remove all code in Design > Custom CSS & add this new code

@media screen and (min-width:641px) {
    #headerWrapper header#header {
    height: 100vh !important;
    padding: 15px !important
}

body.sidebar-position-left #headerWrapper {
    left: 0 !important;
    top: 0 !important
}

#headerWrapper header#header {
    height: 100vh !important
}
}
header#header {
    background: #402533
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.