Class no longer visible in "Class Manager"

Good day to you all,
Recently I followed the “Blocs tutorial - Dropdown menu with mouseover”. I managed to create a menu. You have to add 3 classes directly in the “class manager”. These are the “dropdown:hover .dropdown-menu” , “dropdown-menu a” and “Dropdown-menu li”. When I close Blocsapp and restart it after a while the class “dropdown:hover .dropdown-menu” has disappeared from the “class manager”. The other two classes are still in the “Class manager”.Everything still works as before, but one class is no longer visible in the “class manager”. When I add that class again the settings will be the same as I set it last time. Is this strange or is this normal? Or have I overlooked something?
Ciao, Rob

Where is that tutorial?

Blocs 3 at this stage can be hit and miss with pseudo classes. (it doesn’t officially support them being applied like that as I understand it). If you put it in the page/project header you will find it will work no problems.

Good morning,

Thank you for taking a look at it.

Here is the link of the tutorial

But if I put the class in the page/project header I can’t change the settings. I have to set the Position > Display to Block. And also change the Margin and background color of the sub menu.

And if it is so that it can’t be solved then if I want to change something I will have to fill in the class again in the “Class Manager” (and it really won’t be every day). The strange thing is that the class settings are maintained even if you don’t see the class in the “Class Manager”. It’s not the end of the world but it’s not convenient.
“dropdown:hover .dropdown menu” is the class that disappears every time I restart the app.

Yeah, it can work, but its not officially supported in the Class manager at present.

I would just put this in your project header, saves the hassle, for now anyway.

<style>
.dropdown:hover>.dropdown-menu {
  display: block;
}
</style>

By the way that tutorial is likely to be Blocs 2, which used Bootstrap 3. There were a lot of changes from Bootstrap 3 and 4.

Thank you for your reaction. Is there a more recent tutorial for creating a navigation? Don’t think so or you would have given me the link.

I will experiment with the style you gave me next time in a new project because in my current project you will see the settings of the class even if you don’t see the class. Strange to me but there will be an explanation for it. Probably because it is a tutorial for Blocs 2 like you said.

The next time I use the style you just gave me I will have to add some color and margin. Right?

For now I will leave it at that in this project. Keep trying for another project can’t hurt. Just learn from it.

Thanks Malachiman and have a nice day
Ciao, Rob

Hello, just this for when someone else can still use this if he runs into the same problem.
In 2017 it was told that it is a great video and I think it still is.
I also experienced some difficulties with the class “dropdown:hover .dropdown menu” but something different then from this topic from Jakerlund.
The other two classes mentioned in the video can be used in the way the video shows.

Malachiman, I did what you told me to do and added some more. I put it in the “Project Header” and it works very well. Thank you for that.

<style>
.dropdown:hover .dropdown-menu {
  display: block;
  background-color: #8C0111;
  box-shadow: 0px #ffffff;
  border: 0px;
  border-radius: 0px
}
</style>

So in the absence of a more recent video the “old one” is still very usable.
If there is anyone who knows an easier way to create a dropdown menu I would love to hear it. I think Blocs is a great program but it is quite a hassle to make a dropdown navigation for a website. But I admit, I am a beginner.

Ciao,
Rob

The dropdown menu working on click is the vanilla Bootstrap 4 approach. Blocs uses the Bootstrap 4 framework. And I would say because it’s based on a mobile first approach. Dropdown menus on hover dont work on touch devices.

So? :sweat_smile: My dropdown menu doesn’t work on a tablet and mobile phone? And I was so proud.

Not on hover anyway.

How can I fix that? Can I do that with a piece of code? Or do I have to start all over again? Can’t people with a mobile phone use my website? I am mainly dependent on people on my mobile phone. Especially in high season.

You menu still works. Just the dropdown opening on hover doesn’t. It requires clicking.

Je menu werkt nog steeds. Alleen de vervolgkeuzelijst bij zweven doet dat niet. Het vereist klikken.

Is it better to change that then? Because most people reach us on their mobile phones when they are on the road. I just don’t know how to change that.

Deepl is great :wink:

Google translate lol

You can keep the dropdown on hover. It will be fine.

Thank you, you reassured me before bedtime. It’s early in the morning over there with you, isn’t it?

Have a nice day.
Ciao,
Rob