- Details
- Written by: Alex Walker
- Category: SPPagebuilder
- Hits: 7
Hi all, I am trying to build a website with a hero image with the top of the image sat being a transparent menu. This sort of look. How do I do this? I have so far manged to use css to make the menu bar transparent but I am lost after this without putting a negative customer position on the module which causes all sorts of problems further down the page. Thanks! (I will be using SP pagebuilder image overlay add on for the hero image/text) .
Try this in the template Custom CSS panel:
/* Makes the header float over the content */
#sp-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 99; /* Keeps it above the hero image */
background-color: transparent !important;
border-bottom: none;
}
/* Optional: Adds a subtle background when scrolling (Sticky Header) */
#sp-header.header-sticky {
position: fixed;
background-color: rgba(0, 0, 0, 0.8) !important; /* Darker transparent background on scroll */
}
- Details
- Written by: Alex Walker
- Category: SPPagebuilder
- Hits: 182
You can disable mouse right click on your site.
Use this JavaScript to Template Options -> Custom Code -> Custom JavaScript
document.addEventListener('contextmenu', event => event.preventDefault());
Joomwalker is not affiliated with or endorsed by the Joomla Project or Open Source Matters.