Following… this would be awesome to use and would help us de-clutter our home page!  I hope you are able to get it to work.  I will be testing this out as well when I get the time.

Let’s start here.

Have you taken a look at the HTML after save and publish?

I notice in your post that you have CSS in a style tag with your HTML.

This is stripped out. So the Green you have set there is gone.

The CSS you have posted, however, shows red.

That explains the color difference.

I will take a deeper dive later at the menu popouts - I have some teaching to do this morning.

Amazing thank you

@Salvo - OK

After taking another look, I believe what is wrong with the dropdowns is your naming convention for the classes. The code itself is fine.

You’ll just need to change up the names so that there aren’t any conflicts with Docebo’s naming within their CSS

For example - I simply placed an x at the end of all the class names and made the appropriate adjustment in the HTML as well and it worked fine - it even took care of the extra padding you were getting.

@Salvo - OK

After taking another look, I believe what is wrong with the dropdowns is your naming convention for the classes. The code itself is fine.

You’ll just need to change up the names so that there aren’t any conflicts with Docebo’s naming within their CSS

For example - I simply placed an x at the end of all the class names and made the appropriate adjustment in the HTML as well and it worked fine - it even took care of the extra padding you were getting.

 

Amazing, thank you so much, so if I understand correctly I only need to change the name on the dropdown menu?

I changed all the classes to be sure that they were unique.

I am testing this as well in our Sandbox.  I had already renamed everything so there would be no conflicts, but I ran into one issue that I haven’t been able to figure out yet…

My dropdown menus are displaying when I hover over the navbar, but because I have another widget on the page under this HTML widget, the contents of the dropdown are displaying BEHIND that other widget.  I can’t seem to figure out how to get it to display in front of the other widget.  Any thoughts?

See below (ignore the “Not Found” message that widget is outdated on our Sandbox).  There should be a test 2 and test 3 link showing when hovering over that Mandatory menu item on the navbar, but they are being hidden by the contents of that widget in the Not Found box.

Hey Greg sorry I’m very new at this CSS

Could you paste the new codes below.

Thank you

@Salvo

Here you can see how I adjusted the class names (added x) but I would still recommend changing them a bit more.

Be sure to update the HTML side to match these class names as well.

/* Navbar container */
.navbarx {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbarx a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdownx {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdownx .dropbtnx {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbarx a:hover, .dropdownx:hover .dropbtnx {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-contentx {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-contentx a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-contentx a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdownx:hover .dropdown-contentx {
  display: block;
}

I am testing this as well in our Sandbox.  I had already renamed everything so there would be no conflicts, but I ran into one issue that I haven’t been able to figure out yet…

My dropdown menus are displaying when I hover over the navbar, but because I have another widget on the page under this HTML widget, the contents of the dropdown are displaying BEHIND that other widget.  I can’t seem to figure out how to get it to display in front of the other widget.  Any thoughts?

See below (ignore the “Not Found” message that widget is outdated on our Sandbox).  There should be a test 2 and test 3 link showing when hovering over that Mandatory menu item on the navbar, but they are being hidden by the contents of that widget in the Not Found box.

 

How did you fix this?

Looks like you need to adjust the z-index of the drop down menu to be higher than the other widgets on the page.

We tried this we put the number to 9999, but still nothing changed

Here’s a question, when you remove the widget below it, does it show completely like in Greg’s above? Trying to confirm that it is a layering thing and not a vertical space issue, i.e. its getting cut off.

If I remove the banner below I can see it correctly

Fixed under the banner needs to be a pics. The pics can be uploaded in the platfrom.

Let me know if you need any help

So you are just adding an image as a buffer between the two modules? Can you put up a finished screenshot for reference for others on the thread? Thanks!

So its just an image buffer then right? Basically pulling a vertical height safety trick? Could do it with no image and just set the min height of the menu container to large as well? Just trying to make sure I am not missing anything here. This is one of my complaints with the more complex HTML widget setups, the height is defined at page load, not dynamically so have to do work arounds like this.

Sorry I have been a bit absent - I have a heavy in-person training schedule this week.

I think you could change your positioning to relative instead of absolute and it should force the lower widgets down but it will also expand the main div and perhaps have an undesirable look.

Z-index won’t affect the stacking order here

yeah that always expanding div was always the issue I ran into and then backed away from these types of things. 

I think I would probably just craft the entire page and dispense with the widgets or perhaps craft a little more of the top portion such that the impacted lower portion is not noticed.

That said - the image serves that same purpose well.

Agreed, except for the mobile fallback always gets me at that level of design