Select to view content in your preferred language

HTML Code for Standard 60px header

643
3
Jump to solution
12-07-2023 11:46 AM
by Anonymous User
Not applicable

I'd like to be able to take the standard 60px header and customize the html code to add one or two drop menu items. If I go to customize header and select custom html, it has the first-tier and second-tier header. I'm not much of an html person so I don't know how to combine this code to replicate the standard header, which has the organization, logo, and menu items all on one, or a single, tier.

Is anyone able to provide some html with one-tier, similar to the standard header?

What would be nice is if Esri gave me the options to choose where to start when I select custom HTML (replicate standard or  prominent header as a template).

0 Kudos
1 Solution

Accepted Solutions
Tyler_M
Esri Contributor

Hey @Anonymous User , thanks so much for posting here!

I also see the first-tier and second-tier header when I first select the "Custom HTML/CSS" option. 

I inspected the "Standard (60 px)" Appearance option's HTML and I am attaching it below in case it may be helpful!  It looks like it may be a good template to start from:

<div id="ember991" class="site-header ember-view"><!----><!----> <nav aria-label="Header menu" id="ember1769" class="navbar navbar-smart navbar-default ember-view"> <div class="container in-editor">
<a href="#" id="ember1770" class="navbar-logo loading disabled ember-view"> <img src="https://maps.arcgis.com/sharing/rest/content/items/8f8d73ba1e3b4241ac18c9ca6cc0bdf3/data">
</a> <div class="navbar-contents">
<span class="navbar-title">
<a href="#" id="ember1771" class="loading disabled ember-view"> Test Hub Title
</a> </span>
<!----><!----> </div>
</div>
</nav>
</div>

 html header.png

 

View solution in original post

0 Kudos
3 Replies
Tyler_M
Esri Contributor

Hey @Anonymous User , thanks so much for posting here!

I also see the first-tier and second-tier header when I first select the "Custom HTML/CSS" option. 

I inspected the "Standard (60 px)" Appearance option's HTML and I am attaching it below in case it may be helpful!  It looks like it may be a good template to start from:

<div id="ember991" class="site-header ember-view"><!----><!----> <nav aria-label="Header menu" id="ember1769" class="navbar navbar-smart navbar-default ember-view"> <div class="container in-editor">
<a href="#" id="ember1770" class="navbar-logo loading disabled ember-view"> <img src="https://maps.arcgis.com/sharing/rest/content/items/8f8d73ba1e3b4241ac18c9ca6cc0bdf3/data">
</a> <div class="navbar-contents">
<span class="navbar-title">
<a href="#" id="ember1771" class="loading disabled ember-view"> Test Hub Title
</a> </span>
<!----><!----> </div>
</div>
</nav>
</div>

 html header.png

 

0 Kudos
by Anonymous User
Not applicable

...

0 Kudos
Tyler_M
Esri Contributor

Of course, let us know how it goes @Anonymous User !  🙂

0 Kudos