Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ebhutch

Version 7 Sidebar Navigation Customization

Question

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

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

Hi

Use this code in Design -> Custom CSS

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

#headerWrapper header#header {
    height: 100vh !important;
}

Please use the like button if it helps you!

Best,
Leopold


Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...