Skip to main content

I’ve got one page that has a lot of catalogs that all fall under the umbrella of HR & Wellness.

I want to put a quick navigation menu at the top of the page so people can quickly jump to the catalog they want.

I found the CSS IDs of each of the widgets, and created an HTML widget with links that points to them. e.g. if the widget is doc-widget-341, I make a <a> tag that goes to “#doc-widget-341”.

However, the page reloads with every clicked link. Can someone tell me what I am doing wrong here?

Here’s the code I created:

<a href="#doc-widget-140">Webinars</a> • <a href="#doc-widget-141">HR &amp; Wellness courses</a> • <a href="#doc-widget-282">Performance management</a> • <a href="#doc-widget-193">Compliance courses</a> • <a href="#doc-widget-341">Diversity, Equity, &amp; Inclusion</a>

Thanks!

I found this interesting so I thought I would poke around a bit on this.

I made a couple quick catalogs and gave myself visibility of them but inspecting the console - I don’t see any IDs - only classes.

When using the hashtag to navigate to a bookmark - you are targeting the ID of that element - which I don’t see one available.

I think I would need a little more detail of what you have going to try and replicate.

Hey Greg! Every widget on the page is given an id, but you can only find them when you load the page proper. They aren’t found in the editor; which is a bit odd.

Here’s an image of the page and one of the ids:

 

Perhaps take it a bit further with the catalog link.

Something like this may perform better

<a href="/pages/30/myCatalogName#doc-widget-104">Catalog Name</a>

Does this make sense?

Take a look at the URL of your proper page for actual nomenclature vs my example.

I can't check it now, but isn't Docebo wrapping HTML widgets with IFRAMEs?

If yes, you will need to add target=”_parent” or target=”_top” to let your anchors navigate the view from inside an iframe. 

Hey Greg! Every widget on the page is given an id, but you can only find them when you load the page proper.

I was able to find those IDs after I made a widget page and put some catalogs in them.

They’re a bit further up the screen - though - relative to where the text for the name of the catalog is making it more challenging to find.

I made a top row with the HTML code and two separate widgets with one catalog each.

The code I provided seemed to work fine on my page.

Hope it works for you.

Hi @Loupetron have you thought about using the custom content box widget? We use this one quite a lot as a jumping off point and you can use images, colours and links to your catalogues...simpler than CSS

Hi @lrnlab. Thanks for the suggestion. Using custom content boxes mean I’d need one box per link. Takes up a lot of space and just doesn’t look right with our design. 

Reply


Terms & ConditionsCookie settings