Version 7 Sidebar Navigation Customization

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!

Hi,
What is the password of your website?

Best,
Leopold

Hi, it is vh2020

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

You've done it @IXStudio, thank you! Is there a way to adjust the padding within the sidebar around the nav links?

Use this code instead before.

#headerWrapper header#header {
    height: 100vh !important;
    padding: 15px !important; /* change to anything you want */
}

Please use the like button if it helps you!

Best,
Leopold

Dear @IXStudio, do you have any solutions for the mobile menu? Screenshot attached. Is there a way to insert a hamburger icon?

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

I think a hamburger icon will make it look better on mobile.

https://vhart.squarespace.com/

Password: vh2020

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 Leopold,

I inserted the CSS above, but the mobile menu is not functional. Are you able to check? That would be hugely appreciated!

https://vhart.squarespace.com/

Password: vh2020

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!

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
}