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.
.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.