Nomis Posted November 29, 2023 Share Posted November 29, 2023 (edited) 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 Edited December 2, 2023 by Nomis Link to comment
tuanphan Posted December 4, 2023 Share Posted December 4, 2023 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
Nomis Posted December 4, 2023 Author Share Posted December 4, 2023 (edited) 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! Edited December 4, 2023 by Nomis Link to comment
Nomis Posted December 7, 2023 Author Share Posted December 7, 2023 Hey @tuanphan, can you help me out with this again? I would really appreciate your help. Link to comment
tuanphan Posted December 7, 2023 Share Posted December 7, 2023 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; } 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
Nomis Posted December 7, 2023 Author Share Posted December 7, 2023 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? Link to comment
tuanphan Posted December 8, 2023 Share Posted December 8, 2023 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? 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
Nomis Posted December 8, 2023 Author Share Posted December 8, 2023 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. Link to comment
tuanphan Posted December 9, 2023 Share Posted December 9, 2023 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; } 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
Nomis Posted December 12, 2023 Author Share Posted December 12, 2023 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! Link to comment
tuanphan Posted December 13, 2023 Share Posted December 13, 2023 I don't see hover effect. Can you explain it a bit clearly? https://www.lebendige-gaerten-hh.de/gartenplanung 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
Nomis Posted December 13, 2023 Author Share Posted December 13, 2023 (edited) 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. Edited December 13, 2023 by Nomis Link to comment
clauyashah Posted December 13, 2023 Share Posted December 13, 2023 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
tuanphan Posted December 14, 2023 Share Posted December 14, 2023 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? 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
Nomis Posted December 16, 2023 Author Share Posted December 16, 2023 @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
tuanphan Posted December 17, 2023 Share Posted December 17, 2023 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; } Nomis 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment