Custom vertical menu / nav sidebar

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

#1. I see you solved this?

#3. #4. I don't see Social links, can you check it again?

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

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;
}

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!