Is there a way to make Duda's sidebar menu's refer to one page of a site instead of the whole site?

torystcyr

So, I am using a sidebar template in Duda. However, the problem is that I don't want the sidebar to be my menu for the whole site. I have created a standard header menu on every page and have hidden the sidebar menu on my home page.

Here's my problem: let's say I have a 3 subjects (Science, History, and Math). Instead of me having my sidebar show all three subjects, I'd like for when I click on the Science subject from my global header, I then only want the Science subject and sub-subjects to show up in my sidebar. As currently constructed, the sidebar will always show all three subjects.

Is there a way to make a sidebar local to one particular page? Or is there a code that says, if page = Science, then hide Math and History?

Thanks for your help

visioncraft

There are probably a hundred different ways to tackle the task, @torystcyr, so I'll give you a few approaches here - hopefully one might suit your needs.

Use just a single navigation menu

The first possible solution, and probably the easiest, is to not use 2 navigation menus, but a single one. Both the header menu and the sidebar menu can handle sub-menus automatically, so for most sites you should be able to get around your pages just using either one or the other. So unless your site navigation is particularly complex, or you have very specific requirements for your sub-navigation, this is probably the easiest solution to create and maintain, and probably what you should consider first.

Automatic header nav, manual sidebar

Let's say that this is an online courses website, where you'll be offering custom courses in the three fields of 'Science', 'History' and 'Math'. Each course is completely individual in structure and presentation, and each course page totally unique - so you'll be custom-designing each course page, as needed. In addition to that, when the visitor is on a course page, you want to have a 'sidebar' where you'll feature the links to the individual sections within the page.

A possible solution to that would be to have your global, top-level navigation menu in the header - with your 'Science', 'History' and 'Math' links, and sub-menus with links to the individual course pages. But on the course page itself, you place a simple widget, such as a 'navigation links' or even 'text' widget, to create the 'sidebar' - just create the anchors on the page and add the necessary anchor links to the widget. You can then set the widget's width, style it with padding, background colour, etc., Finally, to turn it into a proper sidebar, use CSS to make its position 'fixed' - so it stays in the same position on the screen as the visitor scrolls down the page.

To make a widget 'fixed', select it, and from its menu select 'Edit HTML/CSS…'. In the Code Editor popup window, click the 'CSS' tab, and enter the position, top and left attributes, as shown here, between the curly brackets:

#dm .dmBody div.u_1559920463{

  position: fixed; 

  top: 100px;

  left: 20px;

}

You'll have to adjust the 'top' and 'left' positions to suit your design. If your sidebar is on the right-hand side of the screen, then use right instead of left to position it. Note that you can't make rows, flex sections or columns fixed — only widgets.

Automatic header nav, dynamic template sidebar

Let's say, however, that all the courses in our site follow the same 'format' — eg., they all have an 'Intro' section, then 4 'Parts' with the actual content, then a 'Review' section, and then a 'Test' section. If all course pages have the same format, this means that our 'sidebar' would be the same on all pages. So, rather than designing each course page individually, we could do this using Dynamic Pages and Collections. Create a 'Courses' collection, then create the dynamic page for the course pages. In that page, create the sidebar as described in the previous section, linking to anchors you've set in each of the different sections of the dynamic page. That sidebar will automatically work for all course pages.

If your 'Science' courses all follow the same structure, but are different from the 'History' and 'Math' courses, you can still use the dynamic features of Duda: just use 3 collections, and 3 dynamic pages instead of a single one - one each for 'Science', 'History' and 'Math' courses.

Custom Widget

If your requirements are extremely particular — for example, if the links in your sidebar have to be gathered on-the-fly following some unusual business logic (eg., "build links to all level-4 headings on the page") then you could always build a custom widget that would do what you need. This solution requires programming knowledge, and it's probably not as easily maintainable as the others, but it does give you ultimate flexibility in building your navigation in any way you want. If you believe you'll reuse this in other sites, and/or your client has enough budget for custom development, it's always a solution that is available to you.

Hope these suggestions help. If they don't, give us a bit more detail about your requirements, so we can give you more targeted replies.

torystcyr

What a great detailed answer. Thank you for your help, will look to try one of your suggestions. Again many thanks!