nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Create "sticky" element in hub page

veronicampbell

Hello, I've been able to add HTML code into a text box to create linked buttons within a hub page, and was wondering if it's possible to have "sticky" elements? I currently have my nav bar like this, but would like to have a "back to top" button that follows down the page. I'm not able to get this functionality to work yet. Thanks!

Najděte více příspěvků označených jako

Accepted answers

Martin1

We have a "back to top" button on our Geoportal (made with ArcGIS Enterprise Sites). Is this what you are looking for? If yes, this is the HTML code I injected using a text box:

<nav class="navbar navbar-link navbar-fixed-bottom" style="">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
      <li class="active" role="presentation">
        <center><a href="#top"><span style="color:#008094" class="glyphicon glyphicon-triangle-top"><p style="font-family:roboto;color:#008094">Top</p></span></a></center></li>
      <li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </li></ul>
  </div>
</nav>

All comments

Martin1

My site is separated in two different ROW cards. The first one I use for the desktop version and the second one for the mobile version. The "back-to-top" button only appears in the desktop version.
You can then use the "Row CSS Class" to hide the row that is not supposed to show:

"hidden-xs hidden-sm" : Row is only shown on desktop
"hidden-lg hidden-md": Row is only shown on mobile

I hope that helps.

AJ_devaccount

Hi @Martin1, is there any CSS you used to make it responsive? So that it doesn't appear in cell phones/tablets?

Thanks!

veronicampbell

Wow that's so cool! Thank you, this is what I was looking for 🙂

Martin1

We have a "back to top" button on our Geoportal (made with ArcGIS Enterprise Sites). Is this what you are looking for? If yes, this is the HTML code I injected using a text box:

<nav class="navbar navbar-link navbar-fixed-bottom" style="">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
      <li class="active" role="presentation">
        <center><a href="#top"><span style="color:#008094" class="glyphicon glyphicon-triangle-top"><p style="font-family:roboto;color:#008094">Top</p></span></a></center></li>
      <li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </li></ul>
  </div>
</nav>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.