Skip to main content

We’re using the Article content type and have added a workaround for a side nav. (The page has a ton of content and is really long, so we added a sticky side nav.) We’re using checkboxes styled with CSS to look like a nav, and some JavaScript to open and close sections for a sub-nav.

The issue is when we try to edit the Body section. If we try to position the cursor down the page (scroll down to some section and click the cursor to start editing), it just pops back to the top. 

In my searching it seems that it’s the hidden child side nav not playing well with the Focus Trap stuff. Is there a way to remove the Focus Trap or override it with CSS?

(I’ve done a lot of experimenting with adding tabindex to the nav that didn’t work. Also, we can’t use the microcourse type, which has a kind of side nav, because it won’t support targeted linking between pages, which we need to do.)

Hi ​@sue826 

I hope you are well. If possible could you please send me the URL to the article you are referencing (you can DM me) and also if possible a quick recording of the issues you are having.

I am not a CSS expert but I may be able to work with my internal colleagues to see if we can figure this out for you.

Once I have a better picture of your challenge I will revert back with some recommendations.

Have a great weekend.

 

Jon

 

Hi ​@sue826 

I had a look at the HTML code behind the Article and the below text at the top of the page ( I guess this is supposed to be the Side NavBar is what is causing the issue. If I remove this code then you can move to any section in the article and the cursor will not jump to the top.

I created another test Microcourse with your code See HERE and you will note that the sidebar nav bleeds into the Right Hand side. This could be due to the limitations of the width of the Acticle.

One approach could be to have the Jump To links as links at the top rather than have them appear on the LHS which the Artice template is unfortunately set up to cater for.

 

See code below.

<div id="reference-guide-nav" class="side-nav nav-start">
    <div class="nav-section">
    <p><a href="#behaviors" id="toggle-1-list">Behaviors Overview</a></p>
    
    <input type="checkbox" id="toggle-1">
    <ul id="toggle-1-content">
        <li><a href="#rules">Rules</a></li>
        <li><a href="#outcomes">Outcomes</a></li>
    </ul>
    <label for="toggle-1"><p><a class="toggle-icon"><img src="https://d36ai2hkxl16us.cloudfront.net/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/eedn9wb9dpw6-Chevron.png" data-image="rjsmo4c953c9"></a></p></label>
    
    </div>
    <div class="nav-section">
        <p>
            <a href="#purchases-events" id="toggle-2-list">Purchases events</a>
        </p>    
       
        <input type="checkbox" id="toggle-2">
        <ul id="toggle-2-content">    
            <li><a href="#AnyItem">Purchases: Any Item</a></li>
            <li><a href="#MinimumItemCount">Purchases: Minimum Item Count</a></li>
            <li><a href="#MinimumItemValue">Purchases: Minimum Item Value</a></li>
            <li><a href="#ProductPairing">Purchases: Product Pairing</a></li>
            <li><a href="#UsingPromoCode">Purchases: Using Promo Code</a></li>
            <li><a href="#Quantity">Purchases: Quantity</a></li>
            <li><a href="#SpecificItems">Purchases: Specific Items</a></li>
        </ul>
        <label for="toggle-2"><p><a class="toggle-icon"><img src="https://d36ai2hkxl16us.cloudfront.net/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/eedn9wb9dpw6-Chevron.png" data-image="rjsmo4c953c9"></a></p></label>
        </div>
    <div class="nav-section">
    <p><a href="#PointsPerEvents" id="toggle-3-list">Points Per events</a></p>
   
        <input type="checkbox" id="toggle-3">
    <ul id="toggle-3-content">
        <li><a href="#AmountAny">Points Per: Amount Spent: Any Item</a></li>
        <li><a href="#AmountSpecific">Points Per: Amount Spent: Specific Items</a></li>
        <li><a href="#QuantityAny">Points Per: Item Quantity: Any Item</a></li>
        <li><a href="#QuantitySpecific">Points Per: Item Quantity: Specific Items</a></li>
      </ul>
      <label for="toggle-3"><p><a class="toggle-icon"><img src="https://d36ai2hkxl16us.cloudfront.net/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/eedn9wb9dpw6-Chevron.png" data-image="rjsmo4c953c9"></a></p></label>
    </div>
    <div class="nav-section">
    <p><a href="#SpendsEvents" id="toggle-4-list">Spends events</a></p>
    
        <input type="checkbox" id="toggle-4">
    <ul id="toggle-4-content">
        <li><a href="#TotalAmount">Spends: Total Amount</a></li>
        <li><a href="#TransactionValue">Spends: With Transaction Value</a></li>
    </ul>
    <label for="toggle-4"><p><a class="toggle-icon"><img src="https://d36ai2hkxl16us.cloudfront.net/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/eedn9wb9dpw6-Chevron.png" data-image="rjsmo4c953c9"></a></p></label>
    </div>
    <p><a href="#Reloads">Reloads Card event</a></p>
    <p><a href="#VisitsAnyStore">Visits: Any Store event</a></p>
    <div class="nav-section">
    <p><a href="#restrictions" id="toggle-5-list">Restrictions</a></p>
 
        <input type="checkbox" id="toggle-5">
    <ul id="toggle-5-content">
        <li><a href="#MaxTimes">Max Times Behavior Qualifies Towards Outcome</a></li>
        <li><a href="#UsesSameTimeframe">Uses Same Timeframe</a></li>
        <li><a href="#Consecutive">Consecutive</a></li>
        <li><a href="#DecimalPrecision">Decimal Precision</a></li>
        <li><a href="#DiscountEligibility">Discount Eligibility</a></li>
        <li><a href="#FrequencyCap">Frequency Cap</a></li>
        <li><a href="#ItemVariety">Item Variety</a></li>
        <li><a href="#MaxEventRate">Max Event Rate</a></li>
        <li><a href="#MaxItemCount">Maximum Item Count</a></li>
        <li><a href="#MinItemCount">Minimum Item Count</a></li>
        <li><a href="#MinItemValue">Minimum Item Value</a></li>
        <li><a href="#MinReloadedAmount">Minimum Reloaded Amount</a></li>
        <li><a href="#MinSpendAmount">Minimum Spend Amount</a></li>
        <li><a href="#MinTransactionValue">Minimum Transaction Value</a></li>
        <li><a href="#OutcomeHurdle">Outcome Hurdle</a></li>
        <li><a href="#PointCalculation">Point Calculation</a></li>
        <li><a href="#PrerequisiteBehavior">Prerequisite Behavior</a></li>
        <li><a href="#QualifyingChannels">Qualifying Channels</a></li>
        <li><a href="#QualifyingContext">Qualifying Context</a></li>
        <li><a href="#QualifyingDayWeek">Qualifying Day of the Week</a></li>
        <li><a href="#QualifyingDiscountCode">Qualifying Discount Code</a></li>
        <li><a href="#QualifyingItems">Qualifying Items</a></li>
        <li><a href="#QualifyingLocations">Qualifying Locations</a></li>
        <li><a href="#QualifyingPaymentTypes">Qualifying Payment Types</a></li>
        <li><a href="#QualifyingPromoCodes">Qualifying Promo Codes</a></li>
        <li><a href="#QualifyingStartEndDates">Qualifying Start and End Dates</a></li>
        <li><a href="#QualifyingTimeDay">Qualifying Time of the Day</a></li>
        <li><a href="#StoreVariety">Store Variety</a></li>
        <li><a href="#Timeframe">Timeframe</a></li>
        <li><a href="#TotalNumberTimes">Total Number of Times</a></li>
        <li><a href="#TransactionVariety">Transaction Variety</a></li>
    </ul>
    <label for="toggle-5"><p><a class="toggle-icon"><img src="https://d36ai2hkxl16us.cloudfront.net/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/eedn9wb9dpw6-Chevron.png" data-image="rjsmo4c953c9"></a></p></label>
    </div>
    </div>

Please let me know if you have any additional questions.

Kind regards

Jon

Thanks for looking into this. I hadn’t thought of using a MicroCourse. I think I’ll experiment with that.

Reply


Terms & ConditionsCookie settings