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

Version 7 Sidebar Navigation Customization


ebhutch

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

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 !importan

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 hel

Hi Use this code in Design -> Custom CSS body.sidebar-position-left #headerWrapper { left: 0 !important; top: 0 !important; } #headerWrapper header#header { height: 100vh !imp

Posted Images

12 answers to this question

Recommended Posts

  • 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

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

Link to post
  • 0
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 post
  • 0

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
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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