For some websites, further configuration is needed to ensure your banner component does not cover up your top site navigation
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.
Don't be a stranger
If you have any questions, we’re here to help! Please feel free to contact us at any time through support@mutinyhq.com.
Comments
0 comments
Please sign in to leave a comment.