Best Answer

Putting a navigation menu on a page

  • 20 December 2021
  • 7 replies
  • 331 views
Loupetron
Rank
Userlevel 1

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!

icon

Best answer by gstager 20 December 2021, 18:07

View original

7 replies

gstager
Rank
Userlevel 7
Badge +5

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.

Greg
Loupetron
Rank
Userlevel 1

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:

 

gstager
Rank
Userlevel 7
Badge +5

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.

Greg
alekwo
Rank
Userlevel 7
Badge +1

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. 

-- Alek Oleszkiewicz - linkedin.com/in/aleko
gstager
Rank
Userlevel 7
Badge +5

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.

Greg
lrnlab
Rank
Userlevel 7
Badge +7

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

Loupetron
Rank
Userlevel 1

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