Floating Nav Menu on Broadcast Theme

[winstonmaz]

Hi,

I’d like to have a floating nav menu with rounded corners and a stroke that sits on top of the hero section block.

Below is a screenshot of what I mean.

donata.ca

pw: taucow

[Small_Task_Help]

Hi,

Hope this will help

• Find Header Code

• Wrap Menu in a Floating Container

Code example

.floating-nav {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border-radius: 12px;
  border: 2px solid #ccc; /* Light gray stroke */
  padding: 15px 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 1000; /* So it floats on top */
}

• Use css for styling

[MandasaTech]

Hello @winstonmaz

To create a floating navigation menu with rounded corners and a stroke that sits on top of the hero section in your Shopify theme (e.g., Dawn or similar), here’s a simple way to implement it using custom CSS and theme layout adjustments.

Steps to Implement:#### Step 1: Identify the Header Element

In your theme.liquid or header.liquid, find the tag or wrapper for the main navigation.

Step 2: Add a Custom Class (if needed)

If the header doesn’t already have a custom class, wrap it like this:

<header class="site-header floating-nav">
  <!-- existing header content -->
</header>

Step 3: Add CSS

Go to Online Store > Themes > Edit Code > base.css (or theme.css) and add this at the bottom:

.floating-nav {
  position: absolute;
  top: 30px; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 12px 24px;
  border-radius: 16px;
  border: 1px solid #e0e0e0; /* light grey stroke */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* subtle shadow */
  z-index: 1000;
  max-width: 90%;
}

Some Tweaks:- Make it semi-transparent: Add background-color: rgba(255, 255, 255, 0.9);

• Add blur effect (frosted glass style):

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  

Result:

Your navigation menu will now:

• Appear on top of your hero section

• Have rounded corners, a border, and a clean modern floating effect

Let me know if you have any questions.

[devcoders]

Hello @winstonmaz

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
  .header__desktop__upper {
    background-color: #fcefb3;
    border: 3px solid #3a628b;
    border-radius: 10px;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header__desktop__bar__l,
  .header__desktop__bar__r {
    display: flex;
    gap: 24px;
    align-items: center;
  }

  .header__desktop__bar__c {
    display: flex;
    justify-content: center;
    flex: 1;
  }

  .header__logo img {
    max-height: 60px;
  }

  .header__menu .navlink--toplevel,
  .header__desktop__buttons a {
    color: #000;
    text-decoration: none;
  }

  .header__menu .navlink--toplevel:hover,
  .header__desktop__buttons a:hover {
    text-decoration: underline;
  }

  .header__desktop__button--cta a {
    background-color: transparent;
    border: none;
    padding: 0;
    font-weight: normal;
    color: #000;
  }

  .header__desktop__buttons--icons {
    gap: 24px;
  }

  .theme__header:after {
    position: initial !important;
  }

  .toolbar.has-border:before,
  .theme__header.has-border:before {
    border: none !important;
  }
}