Jump to content

Custom vertical menu / nav sidebar

Recommended Posts

Posted

Site URL: http://neilperryphoto.com

Hi folks

Using some css code that I've plundered from various sources on the internet, I've been able to just about get the appearance and functionality I've been looking for. However, from a commercial point of view it needs to be much better.

You'll see I've set up my page nav as a vertical menu on the left of my site.  It looks ok to start with but I need the following to be improved / set up:

  1. To create a secondary nav from 'Studies' down - a space between 'Studies' and 'Tile House' would be ideal
  2. For the main content section of the site (where all the images are) to remain fixed in size so that if the browser is resized the menu / nav doesn't start to cover the content
  3. For the social links, contact and copyright info to sit at the bottom left of the menu / nav section (so there's no footer)
  4. For the social links to be side by side and not on top of each other.

Is this even possible?!  I know it'd totally improve the overall appearance and clarity of finding info but I don't even know if it's doable.

I'm using 7.1.

Thanks for your help!
Neil

  • Replies 4
  • Views 158
  • Created
  • Last Reply

Top Posters In This Topic

Posted

Thanks very much - in the end I found a plugin which had heaps of customisation options so I went with that.  

One thing you might be able to help with though, I want to insert a space between two nav elements (between 'Tile House' and 'Films').  Is this possible?!

Posted
19 hours ago, NPPhotographer said:

Thanks very much - in the end I found a plugin which had heaps of customisation options so I went with that.  

One thing you might be able to help with though, I want to insert a space between two nav elements (between 'Tile House' and 'Films').  Is this possible?!

You can use this to Website Tools > Custom CSS

div.header-nav-item:has([href="/films"]) {
    margin-top: 50px !important;
}

 

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

Posted
On 11/22/2024 at 10:39 AM, tuanphan said:

You can use this to Website Tools > Custom CSS

div.header-nav-item:has([href="/films"]) {
    margin-top: 50px !important;
}

 

Legend!! Thanks so much!

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.