Results 1 to 2 of 2

Thread: How to set a fixed position and freeze my breadcrumb in the body of the HTML?

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2003
    Posts
    782

    Question How to set a fixed position and freeze my breadcrumb in the body of the HTML?

    How to set a fixed position and freeze my breadcrumb in the body of the HTML below, so it will not scrollable?

    Code:
    <body>
    
         <div class="c-subheader justify-content-between px-3">
            <!-- Breadcrumb-->
            <ol class="breadcrumb border-0 m-0 px-0 px-md-3">
                <li class="breadcrumb-item">x</li>
                <li class="breadcrumb-item"><a href="#">y</a></li>
                <li class="breadcrumb-item active">z</li>
                <!-- Breadcrumb Menu-->
            </ol>
        </div>
    in my _layout.cshtml

    Code:
    <div class="c-body">
            <main class="c-main">
                @RenderBody()
            </main>
        </div>

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: How to set a fixed position and freeze my breadcrumb in the body of the HTML?

    It sounds like you want the breadcrumb to be sticky (documentation):
    Code:
    div.c-subheader {
      position: sticky;
      top: 1.5rem;
    }
    Example: https://jsfiddle.net/12ze650x/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width