Tagged: negative margin
-
AuthorPosts
-
November 8, 2021 at 7:09 pm #1328256
If I place buttons or links in an element inside a Color Section and that Color Section is followed by another Color Section with a negative margin, the buttons/links become unclickable if they’re placed inside the scope of the negative margin of the second Color Section:
Example: REMOVED
It’s a pretty simple page: 3 Color Sections followed by each other. The second Color Section currently has a negative margin of -250px for testing purposes. The link in the first 1/3 element and the button in the second 1/3 element cannot be clicked. You might want to resize your screen to see.
- This topic was modified 3 years ago by Desdichado.
November 9, 2021 at 8:24 am #1328310Hey Desdichado,
Thank you for the inquiry.
You have to make sure that the color section containing the links is higher in the stack order or that it has a higher z-index property compare to the section with the margin offset. In order to do that, you have to modify the color section containing the links, apply a unique ID (section-id-1 for example) or custom css class name in the Advanced > Developer Settings panel and add the following css code using the specified ID or custom css class name.
#section-id-1 { z-index: 99999; position: relative; }
// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelNovember 9, 2021 at 8:52 am #1328313Hello Ismael,
I see what you’re attempting here, but it breaks both the design with the three boxes in the first Color Section, since they no longer “overlap” the following Color Section.AND it removes the top menu. See these pages:
REMOVED (with your suggested changes)
REMOVED (without your suggested changes)- This reply was modified 3 years ago by Desdichado.
November 10, 2021 at 4:15 pm #1328541Hi,
Thank you for the update.
You may need to move the columns to the second section and pull them upwards by applying a negative top margin, same as what was done with the color section. You may also have to apply a minimum height to the first section to keep the gradient background.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.