I need help with changes in the mobile-styled page menu

Hi, I have a few questions about styling the page menu. I have created a menu in the mobile style for my site, even for the desktop version. I have some requests for changes, and I need your help with them:

• How can I make the underline that appears when an item in the menu is active and the arrow of the dropdown folder for the "Services (Leistungen)" item appear slightly bolder? Both elements should be stylistically adjusted to match the font weight.
   
• Is there a way to have the dropdown folder in the desktop version appear not by clicking but by hovering over it? In this case, the "Back" option in the dropdown menu would need to disappear.
   
• How can I change the line spacing in the dropdown menu (the spacing between individual items is unfortunately much larger than in the main menu)? It should be adjusted to match the spacing of the items in the main menu.

Looking forward to your help!


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

#1. Underline

I see you figured it out?

Arrow

Use this code to Custom CSS box

span.chevron.chevron--left, span.chevron.chevron--right {
    border-width: 3px;
}

#2. You mean hover this >> Show a dropdown beside?

#3. I see you figured it out?

@tuanphan

#1 Thank you for helping with the arrow; it worked. Now, I'd like to make the underline a bit bolder. Can you assist with that as well?

#2 Exactly, when hovering over it, the dropdown menu should be displayed either instead of the main menu or to the right of it. Is it possible for you to send me a solution for both variants?

#3 Unfortunately, not yet. As you can see in the screenshots attached, the spacing between the links in the dropdown menu is still larger than between the individual menu items in the main menu. How can I adjust the spacing?

Thanks for your help 🙏

#1. Use this CSS code

.header-menu-nav-item-content {
    background-size: 2px 2px !important;
}

#2. I can help, with this, hover, dropdown items will appear beside, like this, but for desktop only, if you want this, I will check again and give full code

THIS IS NOT FINAL CODE. JUST DRAFT, I SAVE for next comment

[data-folder="/leistungen"] {
    position: fixed;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    left: unset !important;
    overflow: hidden !important;
    min-height: unset !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

#3. Use this CSS code

[data-folder="root"]~[data-folder] * {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

@tuanphan Thank you for your help. Point number 3 worked well. Can you assist me with point number 2 now? It's only about the desktop version.

On 4/5/2024 at 10:41 AM, tuanphan said:

THIS IS NOT FINAL CODE. JUST DRAFT, I SAVE for next comment

[data-folder="/leistungen"] {
    position: fixed;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    left: unset !important;
    overflow: hidden !important;
    min-height: unset !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

@tuanphan It would be really great if you could help me with this again. Many thanks in advance! 🙏

I will check and let you know soon

@tuanphan Have you been able to find out anything about the code yet?

On 4/25/2024 at 3:47 AM, Nomis said:

@tuanphan Have you been able to find out anything about the code yet?

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('[data-folder="/leistungen"]').appendTo('.header-menu-nav-folder[data-folder="root"]');
});
</script>
<script>
  $(document).ready(function(){
    $('.container.header-menu-nav-item:nth-child(2)').hover(function(){
        $('[data-folder="/leistungen"]').addClass('show-hide');
    }, function(){
        $('[data-folder="/leistungen"]').removeClass('show-hide');
    });
});
</script>
<style>
  .header-menu-nav-folder .header-menu-nav-folder {
    display: block !important;
    right: 0;
    transform: unset !important;
    width: unset !important;
    max-width: 500px;
    overflow: hidden;
    left: unset;
}

[data-folder="/leistungen"] .header-menu-controls.container.header-menu-nav-item {
    display: none;
}

[data-folder="/leistungen"] {
    visibility: hidden;
}
  .show-hide {
    visibility: visible !important;
}
</style>