how to create sticky transparent Menu bar header?

Hello guys,   I am not good making layout and styling could you guys help how can i create a sticky transparent header where hero image showen on the background? I would would be batter to create anonymous home page layout with transparent background header with steps included thank you.    
2 answers

Hi Ablikim,


Create a layout with the header you want. Something like this:


Next create a scss file in the styling folder with a new class to add to the header.

The CSS code: 

/* Make the header sticky */
.your-header-class {
    position: sticky;
    top: 0;
    z-index: 1000; /* Adjust as needed */

Import the file in the main.scss by adding this line of code


Add the class to the header inside the layout


Create a page with the layout and you have a sticky header.



You can edit the CSS to stretch the image but for now I only included the properties needed to make it stick.

Hope this helps.


Hi Ablikim,


Again, some custom CSS to the rescue. Add this code to the same file you made earlier and add the class to the menu bar. 



background-color: rgba(0,0,0,0);

ul {

li {

a {

color: black !important;

background-color: gray;


a:hover, a:focus {

color: white !important;

background-color: black !important;






The a selectors define the colors of the menu buttons in the different states. You can edit the colors to your liking for hover or focus.