AnsweredAssumed Answered

Relocate Follow Inititiave Button to Header

Question asked by jpilbeam on Feb 7, 2020
Latest reply on Feb 13, 2020 by KSchmitt-esristaff

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>

Outcomes