Create a Floating Header in Flatsome Theme

Easily design a minimalistic, boxed Floating Header using our Flatsome Theme tutorial and custom CSS for a unique WordPress menu experience. Watch the video.

Posted on by Sebastiaan Gamelkoorn
 •


In this tutorial, we’ll show you how to create a floating header similar to the one found on zelt.app, using the Flatsome Theme and custom CSS. By following along, you’ll learn how to adjust your Flatsome options and integrate the provided code into your own project. Plus, we’ll guide you on how to tweak the CSS to achieve a setup that suits your preferences. Let’s dive in and give your website a fresh, trending look!

Introduction

In this tutorial, we’ll show you how to create a floating header similar to the one found on zelt.app, using the Flatsome Theme and custom CSS. By following along, you’ll learn how to adjust your Flatsome options and integrate the provided code into your own project. Plus, we’ll guide you on how to tweak the CSS to achieve a setup that suits your preferences. Let’s dive in and give your website a fresh, trending look!

How to setup

  1. Setup content background in FS options
  2. Remove background color of header main in FS options
  3. Disable divider of header main in FS options
  4. Add custom CSS to your project
/* Floating header styling */
.header-inner.container {
    margin-top:30px;
    max-width: 950px;
    border-radius: 20px;
    padding: 0px 30px;
    background: rgba(255,255,255,.54);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Header padding for Mobile + Tablet */
.header-main  {
    padding: 0px 15px;
}

/* Remove header shadow */
.header-wrapper.stuck, .header-shadow .header-wrapper, .layout-shadow #wrapper {
    -webkit-box-shadow: none;
    box-shadow: none;
}