All Collections
Inbound Personalization (website, blog, landing pages)
Components
Prevent a Banner Component from covering your top navigation
Prevent a Banner Component from covering your top navigation

For some websites, further configuration is needed to ensure your banner component does not cover up your top site navigation

Updated over a week ago

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 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':

class="Global__Header ck-74j3oy" >> 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 . when you enter it in Mutiny. If it is an id, you will precede the value with #

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

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


Don't be a stranger

If you have any questions, we’re here to help! Please feel free to contact us at any time, either through intercom chat or via mutinylovesyou@mutinyhq.com.

Did this answer your question?