Relocate Follow Inititiave Button to Header

JaredPilbeam2 — Sun, 12 Dec 2021 01:10:23 GMT

This question is similar to one already asked: Hub Site Custom Header

But, I'd like to relocate the Follow Initiative up to the header. I'd also like to keep the icons for Instagram, Twitter and Facebook.

Here's how I'd ultimately like the header to look. And I want to relocate the Unfollow button to the right side of the header.

I took the following HTML from Standard header, but when I place it in the Custom HTML/CSS HTML box the social media icons no longer appear. I was attempting to squeeze the Unfollow HTML into this, but I'm not sure how or where.

<!---->
<!---->
<nav id="ember3079" class="navbar navbar-smart navbar-default ember-view">
  <div class="container in-editor">
    <a aria-label="Home" href="#" id="ember3080" class="navbar-logo loading disabled ember-view"> <img
        src="https://webapp.willcountyillinois.com/gisweb/images/hub_header_logo.png">
    </a>
    <div class="navbar-contents">
      <h1 class="navbar-title">
        <a href="#" id="ember3081" class="loading disabled ember-view"> Home
        </a> </h1>
      <div class="navbar-menu navbar-nav">
        <div id="ember3082" class="responsive-tabs ember-view">
          <ul class="responsive-tabs-nav " role="navigation">
            <li id="ember3083" class="ember-view"> <a href="#">
                Dashboard Main
              </a>

            </li>
            <li class="dropdown hide">
              <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#"
                role="button">More <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li id="ember3084" class="ember-view"> <a href="#">
                    Dashboard Main
                  </a>

                </li>
              </ul>
            </li>
          </ul>
          <div class="overflow-handle overflowing-left"></div>
          <div class="overflow-handle overflowing-right"></div>
        </div>
      </div>
      <div class="navbar-social">
        <a href="#">
          <svg draggable="auto" style="" id="ember3086" class="svgstore-image ember-view">
            <title>Facebook</title>
            <use xlink:href="#ember-arcgis-hub-components-hub-icons-facebook"></use>
            <!---->
          </svg>
        </a>
        <a href="#">
          <svg draggable="auto" style="" id="ember3088" class="svgstore-image ember-view">
            <title>Twitter</title>
            <use xlink:href="#ember-arcgis-hub-components-hub-icons-twitter"></use>
            <!---->
          </svg>
        </a>
        <a href="#">
          <svg draggable="auto" style="" id="ember3090" class="svgstore-image ember-view">
            <title>Instagram</title>
            <use xlink:href="#ember-arcgis-hub-components-hub-icons-instagram"></use>
            <!---->
          </svg>
        </a>
      </div>
    </div>
  </div>
</nav>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Relocate Follow Inititiave Button to Header

KlaraSchmitt — Thu, 13 Feb 2020 22:13:18 GMT

Hi Jared,

A few things...you may notice looking your code that you don't have a full SVG object. (Typically, if you were embedding an SVG you'd see elements like <path> or <rect> or <ellipse>.) We are using a SVG sprite generator to support our own use of SVGs, but it involves Javascript. You can still use ours, but you need to drill down further and copy the actual object and not the wrappers we're using as part of our scripts. So inspect the icon, then expand the <use xlink> and then expand the <shadow root>, and copy the real SVG object into your header.

Unfortunately, we don't have a method for you to put the follow button in your header as it requires some additional javascript that is not visible from our source code and won't work in that context, but that is an excellent idea that I will take back to our team.

topic Relocate Follow Inititiave Button to Header in ArcGIS Hub Questions

Relocate Follow Inititiave Button to Header

Re: Relocate Follow Inititiave Button to Header