Secondary Sidebar Navigation

Design help General
1

Hi Everyone! I’m excited to be completing my first client project as a freelancer with Webflow and am hoping someone might be able to help.

I’m looking to create a secondary side navigation that functions similarly to the Webflow university page (or other popular forums/course sites). See here.

My specific design looks like below:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Screen Shot 2021-07-30 at 9.20.38 AM
Screen Shot 2021-07-30 at 9.20.38 AM1582×960 73.2 KB

Does anyone know how to get me started on the right path? I’ve taken a full course in Webflow so I’m not a total noob but I can’t seem to figure it out.

So far, I’ve tried to add a second navbar and orient it to the left but it takes up the full left side of the page and cuts into the top nav bar. How can I create this secondary navigation without it overlapping/pushing aside the top main navbar? See below:

Screen Shot 2021-07-30 at 9.26.47 AM
Screen Shot 2021-07-30 at 9.26.47 AM2390×1656 172 KB

1 Like
2

Hey @jdstudios, congrats on the freelance milestone, that’s a huge win.

As for the issue you are facing, I think the Navbar element has pre-applied styles that makes it take either the full width or the full height of the window.

I would recommend creating a div calling it sidebar__nav. Have your Body position: relative and set the position of sidebar__nav as fixed left and tweak the position settings as you like.
Then you can add your links into the sidebar__nav. Set the display of sidebar__nav to flexbox with flex-direction: vertical (columns) so the links you added arrange as seen in Webflow University.

Hope this helps!

1 Like