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

Home Forums Support How to create a vertical secondary menu with fixed scroll, left of main content

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1135876
    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;
    	}
    }
    
    #1136466
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1138009
    Whelan

    Thanks, that’s working nicely.

    #1138237
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.