WAIT: Header - Z-index and Icons

Browser: Brave
OS: macOS
URL: Acume: Making academic wisdom easy to use for social impact

  1. I have tried adding a z-index to the class active, which toggles when the interaction starts and toggles correctly. But the interaction remains over the first section rather than appearing from under. Does Z-index not work on the headers?

  2. Also my “Ionicons” (added by me by style {content: }) loads in the editor but not on live site. Was just using that as was available on Bricks. Is it not accessible if not selected from icons?

Hi Yasmine,
Thanks so much for your report!

  1. Unfortunately, I don’t understand. Can you please show and explain in a short screencast using https://jam.dev?

  2. The font CSS is only loaded if you select the font on an element. This is not the case within custom CSS/pseudo-content. In this case, you would have to add ionicons manually to the page header scripts:

<link rel="stylesheet" id="bricks-ionicons-css" href="https://yourdomain.com/wp-content/themes/bricks/assets/css/libs/ionicons.min.css" media="all">

If you only want to load ionicons for this single icon, I would suggest using an SVG
Hereby you can convert it and use it in content:.

Best regards,
timmse

Hi Timmse,

Thank you for the reply - I think my sound didn’t work in the video: Jam

But basically I have a slidedown element that appears on click. Using interactions I add a class, so that I can add Z-index to try fix the issue. What I want is for the second element to emerge from underneath the top element, rather than above.

Also completely understand about the ionicons. Because it was rendering in the editor I thought was loaded!

Yes, unfortunately the sound cuts out quite quickly, so it becomes very difficult to follow the video from that point on.

Can you please publish the template and make sure that “Public templates” (Bricks » Settings » Templates) is active? Otherwise, I can’t see it here: Acume: Making academic wisdom easy to use for social impact

On the canvas, we load everything as a lump sum because it doesn’t really matter there. However, it certainly affects performance on the front end. That’s why it’s different there.