[Resolved] How to create a vertical secondary menu with fixed scroll, left of main content

[Whelan]

I want to display anchor links in a block on certain pages. I want them to scroll with the page and I want the block to sit to the left of the main content with no gap @ screens min-width 769px.

I’m currently using a hook element to achieve this which inserts the block before the main content and I use a negative margin to bring it to the left.

I’ve also tried a left sidebar widget.

My Questions:

1. Is my current set up of using a hook element and CSS the best way to do it? What if I want to place it on a full-width page?

2. If I give it z-index:-1, it is not clickable. How can I make the block sit behind the footer when the page is scrolled to the bottom?

Here’s a link to the current setup:

https://charityfasttrack.uk/courses/charity-team-leader-apprenticeship-training/#register

Here’s the CSS:

@media (min-width:769px) { 

#nav_menu-5 {
	margin-left:-90px;}
	
#nav_menu-5 ul {
	list-style:none;
	padding:40px 10px;
	margin-right:0;
	overflow:hidden;
        background:#ffffff;
	position:fixed;
	font-family:"Roboto Condensed", sans-serif;
	font-weight:300;
	border-radius:10px 0 0 10px;
	}
}

[Tom]

That method looks good. You’ll likely need to use media queries to re-position it at a certain width so it’s not off screen.

As for the footer, try this CSS:

.site-footer {
    z-index: 5;
    position: relative;
}

Let me know 🙂

[Whelan]

Thanks, that’s working nicely.

[Tom]

Glad I could help 🙂

[Author]

Posts