Astroid Framework

Open source framework for designers and developers to create responsive, fast & robust Joomla based websites and templates.

How to create transparent header in Astroid!

header-transparent position-absolute

Add the following CSS in your astroid custom css section (doc).

.astroid-header-section { background: transparent; z-index: 9999; border-bottom: 1px solid rgba(255, 255, 255, 0.26); }

Make sure your header doesn’t have any background color selected in the backend section level or the colors section and change that color to transparent as well.

That’s it. This should do it. You may add the class pb-2 (padding-bottom 2 (range is between 1 – 5)) to create additional padding towards the bottom between the header and the section below.

Panda Bui