Best Answer

HTML menu bar

  • 25 September 2022
  • 22 replies
  • 513 views
Salvo
Rank
Userlevel 7
Badge +2

 

Hi, I’m trying to get this menu bar to work. 

I have this HTML code 


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: green;
}

.dropdown-content {
  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;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">Home 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
</div>
    <div class="dropdown">
    <button class="dropbtn">Mandatory 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
      </div>
</div> 
    <div class="dropdown">
    <button class="dropbtn">Leadership 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
      </div>
      </div>
    <div class="dropdown">
    <button class="dropbtn">Channels 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
      </div>
      </div>
    <div class="dropdown">
    <button class="dropbtn">Wellbeing 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
      </div>
</div>
</body>
</html>

And this CSS

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

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

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

/* Dropdown button */
.dropdown .dropbtn {
  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 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  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-content 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-content a:hover {
  background-color: #ddd;
}

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

The page should look like this (on the right)

 

Instead it looks like this 

Colour looks different, and also the dropdown menu doesn’t appear.

Can any of the HTML/CSS GURU help me? 🙏🏻

 

icon

Best answer by gstager 26 September 2022, 17:33

View original
SB

22 replies

sjennings78
Rank
Userlevel 6
Badge +3

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.

gstager
Rank
Userlevel 7
Badge +5

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.

Greg
Salvo
Rank
Userlevel 7
Badge +2

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

SB
gstager
Rank
Userlevel 7
Badge +5

@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.

 

Greg
Salvo
Rank
Userlevel 7
Badge +2

@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?

SB
gstager
Rank
Userlevel 7
Badge +5

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.

Greg
sjennings78
Rank
Userlevel 6
Badge +3

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.

 

Salvo
Rank
Userlevel 7
Badge +2

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.

Hey Greg sorry I’m very new at this CSS

Could you paste the new codes below.

Thank you

SB
gstager
Rank
Userlevel 7
Badge +5

@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;
}

 

Greg
Salvo
Rank
Userlevel 7
Badge +2

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?

SB
Bfarkas
Rank
Userlevel 7
Badge +3

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

Salvo
Rank
Userlevel 7
Badge +2

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

SB
Bfarkas
Rank
Userlevel 7
Badge +3

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.

Salvo
Rank
Userlevel 7
Badge +2

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

SB
Salvo
Rank
Userlevel 7
Badge +2

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

2 Attachments
SB
Bfarkas
Rank
Userlevel 7
Badge +3

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!

Salvo
Rank
Userlevel 7
Badge +2

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!

 

 

SB
Bfarkas
Rank
Userlevel 7
Badge +3

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.

gstager
Rank
Userlevel 7
Badge +5

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

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

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

gstager
Rank
Userlevel 7
Badge +5

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.

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

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

Reply


Terms & ConditionsCookie settings