Prevent a Banner Component from covering your top navigation

This article content is for personalizations on your existing website. Looking to build 1:1 Mutiny-hosted microsites for your target accounts? Visit our Campaigns help docs here.

For some websites, further configuration is needed to ensure your banner component does not cover up the site's top navbar. If you are using a banner component with a top placement, you might find that the banner shows up on top of your navigation in the Mutiny editor. If you find this is an issue, you can set a custom Fixed Header Selector in the Functionality section of the editor.

How to Set Your Fixed Header Selector

Step 1 -

To determine what your CSS header selector is, navigate to the page the banner will run on in a new browser tab. If you have a sticky nav (the navigation stays present as you scroll down the page), scroll down on the page until the sticky nav appears. Right-click on the navigation and click "Inspect".

Step 2 -

On the Element tab, highlight the row in the HTML that shows the entire navigation highlighted on the page above. You might need to move the cursor up to parent elements to find the level where the entire navigation is highlighted on the page.

Step 3 -

When you find the right level, copy either the class or id value from that element. There may be more than one of each (if so, they are separated by a space). You only need one to use in Mutiny, and you should choose the one that seems the most unique and stable (i.e. is unlikely to change often). For example, in the gif below, there are two class values, 'Global_Header' and 'ck-74j3oy':

Most likely, "Global__Header" will remain present while the string of letters and numbers may change with subsequent code releases.

Step 4 -

Once you identify the class of ID to copy, head back to your Mutiny editor. Click on the "Functionality" dropdown. Under "Fixed Header Selector", paste in the class or ID value you copied from your site. If your header selector is a class value, precede the value with a period when you enter it in Mutiny. If it is an id, you will precede the value with the hashtag. Examples of this would be:

class="Global_Header"

.Global_Header

id="Global_Header"

#Global_Header

In this example, we are using a class value so we will enter the below value in Mutiny:

.Global__Header 

Step 5 -

Preview your experience to ensure the banner is now appearing as expected.

Need Help?

If you have questions or need help, the Mutiny Support team is here for you!  You can submit a support ticket at the bottom of this page or reach us at support@mutinyhq.com.