How can I create a transparent sticky menu with customizable icons and fonts?

Store Design
1

Hi,

I have made various tutorials on this subject but I still need more guidance. We need to have a transparent menu on all pages with a sticky menu that has a white background and the option to change icon and font colors for the sticky menu. Any ideas? Thanks a lot

1 Like
2

Hi @CatalinaMarkodi ,

Have you check the theme customization section is there any option for this ?

which you are using ?

Or you can share me the URL.

1 Like
3

@CatalinaMarkodi

Please share your store URL! I will check your shop and send the correct solution to you!

Thanks!

1 Like
4

Hello @CatalinaMarkodi

Add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code:

.header--middle-left{background: transparent !important;
    position: fixed !important;
    width: 100% !important;
    text-align: center !important; }

@media (min-width: 1000px){
    .header--middle-left{
			left: 10%;
		}

}

I hope it will be helpful for you.

Thanks

Did it solve your issue?

  • If yes, Like & Mark As Solution to help the community

  • If not, let me know. also share a screenshot of the code that you added.

1 Like
5

This is a great solution. Is it possible the sticky header can be made to have a mostly white background that is just slightly transparent? Like this website www.withcococktails.com ? Thanks.