Sticky Nav Help

1

Hi!
So I’m trying to modify the code from a stickynav menu from w3 here - https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

but i want it to look vertical like this - https://www.w3schools.com/howto/howto_css_icon_bar.asp

Can anyone help?

2

I made some quick changes to these 3 selectors.

#navbar {
overflow: hidden;
background-color: #333;
width: 100px;
}

#navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

1 Like
3

thank you @ProgMan that helps!

Just one last thing, how do I put this on the right hand side, i cant figure out on where on the code to put this.

Thanks again

4

by adding float: right; to navbar it sticks to right but not when scrolling…

5

Sorry it took so long to reply.
On the sticky class:
.sticky {
right: 0;
}

Hope this helps

1 Like
6

@ProgMan Thank you so much for your help! That worked :slight_smile: