how to create sticky transparent Menu bar header?

1
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.    
asked
2 answers
0

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.

answered
0

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. 

 

.custom-menubar{

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. 

answered