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>Accepted Solutions
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.
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.
