How to Create a Customized Dropdown Menu?

Hello, I am currently building a new page and have a question about it.

I would like to modify the dropdown menu as follows. The menu should be aligned with the bottom edge of the header. The header and menu should be separated by a colored line. There should be some additional space between the individual menu items. Additionally, I would like to have an underline as a hover effect. You can find a screenshot with an example attached.

I would greatly appreciate any help with this!

My site: https://www.lebendige-gaerten-hh.de/
Pword: lebendigegaertenhh2023

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
div.header-nav-item>a {
    height: 170px;
    display: flex;
    align-items: center;
}

div.header-announcement-bar-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

div.header-nav-folder-content {
    border-top: 4px solid green;
    padding: 0 !important;
}

div.header-nav-folder-item {
    padding: 5px !important;
}

div.header-nav-folder-item:hover {
    background-color: #f2f2f2;
}
}

Hello @tuanphan, thank you very much for your help; it already looks quite good.

However, I have a couple of additional questions. Unfortunately, the underline that appears when activating individual items in the navigation has shifted down slightly (see attached screenshot). This happens with all the links in the navigation. How can this be fixed?

I just noticed that when you click on one of the links in the dropdown menu, the header temporarily enlarges (I changed the height from 170px to 100px). How can we prevent this from happening?

Is it possible to add a bit more space to the right and below the links in the dropdown menu? The text is quite close to the edges, and I would like to have a bit more breathing room there.

Additionally, I would like to experiment with making the background of the dropdown menu transparent, just like the header. How can I achieve that?

I would greatly appreciate further assistance!

Hey @tuanphan, can you help me out with this again? I would really appreciate your help.

I didn't see your comment

#1. You mean remove underline, or make it touch green line in top of dropdown menu?

#2. Header enlarge

It shows fine to me now. Did you fix it?

#3. To add space, use this CSS

div.header-nav-folder-item a {
    padding-right: 10px !important;
    padding-bottom: 10px !important;
}

#4. With dropdown background, use this CSS code

div.header-nav-folder-content {
    background-color: rgba(255,255,255,0.9) !important;
}

Thank you for your message @tuanphan!

The line is supposed to underline the active points in the navigation (Leistungen, Projekte, Team, etc.). For some reason, it seems to have shifted down. How can this be changed?

21 hours ago, Nomis said:

Thank you for your message @tuanphan!

The line is supposed to underline the active points in the navigation (Leistungen, Projekte, Team, etc.). For some reason, it seems to have shifted down. How can this be changed?

You mean need the underline closer the text above it?

1 hour ago, tuanphan said:

You mean need the underline closer the text above it?

 

@tuanphan Yes, exactly. After the changes to the dropdown menu, the line seems to have shifted down somehow.

To achieve your request customized dropdown, I used code to increase Nav item height (screenshot, the box is nav item height), so the underline will appear at bottom of text

You can use this CSS to add new underline. Adjust 15px to change space between underline - text

div.header-nav-item>a {
    background-image: none !important;
}

div.header-nav-item--active>a:after {
    content: "";
    background-color: var(--solidHeaderNavigationColor);
    width: 100%;
    height: 1px;
    position: absolute;
    margin-top: 15px;
}

Thank you @tuanphan, that worked so far.

Is it possible to have the underline also work as a hover effect for the navigation? How can I achieve that?

Looking forward to further assistance!

I don't see hover effect. Can you explain it a bit clearly?

https://www.lebendige-gaerten-hh.de/gartenplanung

Ah sorry @tuanphan, that may not have been clear enough. I would like to have an underline hover effect for the navigation points in the header.

To create a customized dropdown menu with the specified features, you can use HTML and CSS. Here's a basic example to get you started:

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Page Title</title>
</head>
<body>

  <header>
    <div class="menu-container">
      <div class="menu-item">Home</div>
      <div class="menu-item">About</div>
      <div class="menu-item">Services</div>
      <div class="menu-item">Contact</div>
    </div>
  </header>

</body>
</html>

9 hours ago, Nomis said:

Ah sorry @tuanphan, that may not have been clear enough. I would like to have an underline hover effect for the navigation points in the header.

You mean underline should appears when hover main + sub/dropdown item?

@tuanphan yes, exactly. There should be a mouseover effect when hovering over the individual elements. In addition to the underline, I would also like a color change as a mouseover effect. So, when hovering the cursor over the elements, each point should appear in a lighter green. How can this be changed?

Looking forward to your feedback!

site: https://www.lebendige-gaerten-hh.de/
Pword: lebendigegaertenhh2023

Add to Custom CSS

/* nav underline on hover */
div.header-nav-item:not(.header-nav-item--active)>a:hover {
    opacity: 0.5 !important;
    text-decoration: underline;
}

.header-nav-folder-item:not(.header-nav-folder-item--active) a:hover {
    opacity: 0.5;
    text-decoration: underline;
}