Jump to content

How to Create a Customized Dropdown Menu?

Recommended Posts

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

Bildschirmfoto 2023-11-30 um 00.00.48.png

Edited by Nomis
Link to comment
  • Nomis changed the title to How to Create a Customized Dropdown Menu?

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Bildschirmfoto 2023-12-04 um 10.14.51.png

Edited by Nomis
Link to comment

I didn't see your comment

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

image.thumb.png.ab4251147e22700af97dc0bb5820d6c4.png

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

image.png.7581b476a9724582d2fd0165aec213d6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.png.e84068abbcc1cc65fd9776f8d855f0b3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

image.png.8b5ba0e7645a061b3214819e5193c429.png

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

image.png.d03ffc639760c85edf2289a56e512e75.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

Link to comment
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?

image.png.405209584032a6cd110c780cb90d6463.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.