CSS: Add Breadcrumbs on Mobile View via CSS

Discussions

Lori

Want to add breadcrumbs to the mobile view for your site? We've come up with some custom CSS (thanks, @Brian Lenz!) that you can use to show the "closest" two levels of the forum breadcrumbs on mobile devices.

You would insert this CSS in the the Custom CSS field in your Display Settings:

.breadcrumbs-wrapper.hide-for-small-only { display: inherit !important; }
@media only screen and (max-width: 40.0625em) {
  .h-page-for-FORUM nav.breadcrumbs li.breadcrumb { display: none; }

  .h-page-for-FORUM nav.breadcrumbs li.breadcrumb:last-child
  , .h-page-for-FORUM nav.breadcrumbs li.breadcrumb:nth-last-child(2)
  { display: list-item; }

  .h-page-for-FORUM nav.breadcrumbs li.breadcrumb:nth-last-child(2):before { display:none; }
}

You might want to add a description at the beginning of the code so that you remember what that is for, like this:

/*add breadcrumbs to mobile view*/

Add Reply

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>

Skip to main content

Discussions

Add Reply

Membership Required

Remove From Your Block List

Block

Please wait...