Select to view content in your preferred language

Create "sticky" element in hub page

943
4
Jump to solution
03-17-2023 03:09 PM
Veronicampbell
Regular Contributor

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!

1 Solution

Accepted Solutions
Martin1
Frequent Contributor

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> 

View solution in original post

4 Replies
Martin1
Frequent Contributor

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> 
Veronicampbell
Regular Contributor

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

0 Kudos
AJ_devaccount
Frequent Contributor

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

Thanks!

0 Kudos
Martin1
Frequent Contributor

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.

0 Kudos