Drop down menu

[lucienng]

For the longest time, I did not know I was the one who created this thread. Thanks for replying Armin! The code works, but just wanted to check, I've the same small issue as Roisinice, is there a way to let the hover stay a little longer? Thanks!!

[arminunruh]

Oh I see what you mean. Roisinice this is your code:

nav.primary .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 30px;
    background-color: white;
    padding: 10px;
    border: 0px solid grey;
}

top: 30px
is a bit too much for you.
try top: 20px

[hgbnd]

Hey Armin, I tried to use your code but it doesn't really work on my website. The main menu category slides to the left.

My website is hugobeniada.com

Also, how can I add vertical space between sub menu items?

Thanks so much for your help!

[hgbnd]

Hey @arminunruh, would you be able to help? That'd be highly appreciated. Thanks!

[mariusjopen]

Hi hgbnd,

sorry for the late reply!

Try this:

nav.primary .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    background-color: white;
    border: 0px solid grey;
    padding-top: 20px;
}

To explain the issue:

The top: 30px in the old code made the whole submenu move down.
Then there was a gap between the top menu and the sub menu.
And when you reach that gap with your cursor, the hovering stops.
So what I did here was to remove the gap by removing the top: 30px.

Then I added a padding-top: 20px which moves the box down as well. But with padding it can still be touched by the cursor.

Many wishes!

Marius

[hgbnd]

This post is deleted!

[hgbnd]

@mariusjopen Works great now, thank you! However, how do I increase the space between sub menu items?

[mariusjopen]

Hey Hugo,

This will do the job:

.sub-menu li {
    margin-top: 4px;
}

If you right-click on your website you can use the Inspector tool. There you can see the HTML and the CSS code. You can even display elements, when they are hidden, because the mouse does not hover on them. (Like your menu)

If you play around with that you can find out those things very easily.

All the best!

Marius

[erikbunger]

Thanks everyone for the tips with how to create a sub-menu.

However after putting this code into the 'custom css for desktop' it gets activated for the mobile version as well? Is there a way I can use it only for the desktop only? In the mobile version I would like all the menu points (including the submenus) to just line up under each other.

Many Thanks

[mariusjopen]

Hi @erikbunger
which code did you put in?

All the best!

Marius

[erikbunger]

Thanks for your quick response @mariusjopen. The one below. It was posted by @arminunruh in another thread in this forum:

/submenu/
nav.primary .sub-menu li{
display: block;
position: relative;
}
.sub-menu{
padding-top: 1px!important;
opacity: 0;
transition: opacity 200ms ease;
-webkit-transition: opacity 200ms ease;
pointer-events: none;
position: absolute;
}
nav.primary li:hover .sub-menu{
opacity: 1;
pointer-events: auto;
}
/**/

To be honest, what I really would prefer would be to have the possibility to do a second independent menu (and not a drop down) but I guess this is not possible at this stage in Laytheme?

Cheers
/Erik

[erikbunger]

And here is the website in question.

erikbunger.com

Cheers
/Erik

[mariusjopen]

Hi @erikbunger

on mobile pages you do not have a hover. So you probably need to open the menu when you click on it.

You might achieve that with jQuery I assume. It will be a bit tricky. because if you would click on the parent link to open the submenu – then the link should not get activated. Otherwise you get forwarded to the next page before the sub-menu opens.

For now I do not see a simple solution for this.

But we might work on that in the future.

All the best!

Marius

[erikbunger]

Thanks @mariusjopen for your answer. The real problem for me is that there no way to do a second menu. I would prefer this to a dropdown menu. I really like laytheme but I find this to be a major disadvantage. So if I could suggest anything it would be to add that feature. It seems like there are more users waiting for this feature. I imagine it would not be too hard to add this possibility?

Cheers

[louis999]

Hi ! Nice option here. Thanks for the help. I am wondering, is there anyway to animate the dropdown so the submenu list item appears one by one ?

[mariusjopen]

Dear @lucienng
to understand you correctly.
You do not want a dropdown-sub-menu? You want a second menu?
This is possible with Laytheme. In menu-options.

Sorry for asking.

Best!

Marius

[Laura S.]

Hello,
I am also currently creating a dropdown-sub-menu and have two questions.

1. I am wondering how to make just the writing visible (no background colour at all).
   In the thread above was a solution for transparent but not invisible.
2. Is it possible to regulate the space between the menu points?
   I would like to shorten the space between the menu point "about" and
   "documentation" and to enlarge it between "documentation" and "event"

Thank you very much in advance!

Here also my link: https://www.udk-schau.de

[Laura S.]

Sorry I think I have to tag you. @mariusjopen
My first time posting.

[Richard]

Dear @lucienng

I am currently seeing no top menu? -

However using the "Custom CSS" area in "Lay options" you can achieve the spacing you desire.

Each Menu item will have its own ID which you can target with CSS

For Example

#menu-item-119{

padding-bottom: 50px;

}

Would create 50px of "padding" - distance underneath e.g Documentation.

For More information on how to find the ID of the Menu items first make sure they exist on the page and then use the inspection tool:

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

And for More information on CSS:

https://www.khanacademy.org/computing/computer-programming/html-css

Once you have the menu visible we can take a look at making it invisible :)

Best wishes
Richard

[Laura S.]

@Richard-Keith said in Drop down menu:

Hey Thank you! I will try it now -

Sorry I just tried something out and accidentally hide it for a short time. Its on now again :) (and most importantly wound disappear ;)