Flex right and left division with certain gap in the middle

[codeispoetry]

@Archibald

BTW there’s no need for .hamberger:hover selector. The cursor: pointer declaration can go in the .hamburger selector.

Thanks.

[codeispoetry]

@Archibald

.top:active {

@Archibald

.middle:active {

@Archibald

.bottom:active {

Could not get this point because the class clicked is in body now. How will the independent class be declared active?

[Archibald]

I didn’t find a class named “clicked”.

If you use :active, a transition will happen when you click on part of the hamburger. I am not sure if that is what you want

[PaulOB]

@Archibald

:active

:active doesn’t apply to divs but raise a good point that the hamburger really should be a button element as it creates an action

[Archibald]

@PaulOB

:active doesn’t apply to divs

The transition works.

[PaulOB]

@Archibald

The transition works

Sorry I’m not following or I’m probably misunderstanding something

What has :active got to do with the transition?

[Archibald]

@PaulOB

What has :active got to do with the transition?

Perhaps I have not examined this lengthy thread in sufficient detail.

What is triggering the transitions if you are not using :active or :hover or similar?

[PaulOB]

@Archibald

What is triggering the transitions

Yes its a bit of a convoluted thread to follow and has veered off topic a bit

There was some JS adding a class when the hamburger was clicked. The class that was added was used to trigger the transition. (There’s also a JS thread tied to this question that may help tie up some loose ends.)

However, I believe that part has been resolved satisfactorily now.

[ladans37]

flex-wrap: wrap , but this doesn’t give a gap between the two left and right.

Would a column-gap: not resolve the issue?