Help, custom header and footer configured via HTML/CSS does not show up on other hub pages.

[SaraWazir]

I have a hub site that has a custom header and footer configured via HTML/CSS. You can see the header in the screenshot below. It has a drop down as well. 

My problem is that this header shows up on the landing page of the hubsite but it disappears from other hub pages. My understanding is that we only configure one header/footer for the hubsite and it applies to all the pages of that hubsite. The header and footer behave normally when I choose the standard header option instead of custom code.

I need help figuring out why my custom header does not show. I don't know if I need to do something special to my code or if I am missing some step. 

Thank you!

[CodyPatterson]

Hey @SaraWazir 

This post here: https://community.esri.com/t5/arcgis-hub-questions/applying-css-style-to-all-pages-in-hub-site/td-p/...

Has a method that describes wrapping the content of your Text widget with the .site-header .custom-header .first-tier classes. I'm curious if you have your CSS selectors wrapped with the .site-header and .custom-header in the main page CSS as well? Would you be able to send a snippet of the code you have?

Cody

[SaraWazir]

Is there a way to independently style the header/footer for each page? I can go that route but I did not see that option anywhere on the page. I only see the header styling option via html/css on the main hubsite application.  

[SaraWazir]

Here is my header code. I have modified the links and names to maintain privacy for my org. 

HTML:

<div class="custom-header navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="https://home-page-link.com/">Home</a></li>
<li class="dropdown">
<a href="#">Programs <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://transportation&landuse.com">Transportation &amp; Landuse</a></li>
<li><a href="https://coastalresilience.com">Coastal Resilience</a></li>
<li><a href="https://energy&affordability.com">Energy &amp; Affordability</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Data <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://assets&data.com">Assets &amp; Data</a></li>
<li><a href="https://datasbasededitor.com">Database Editor</a></li>
</ul>
</li>
</ul>
<a href="https://www.myorg.com/" class="navbar-right">
<img src="https:imagesourcedata" alt="My Org Logo" style="height:50px;">
</a>
</div>
</div>


CSS

.navbar-inverse {
background-color: #00497f;
padding: 10px 20px;
}

.navbar-inverse .navbar-nav > li > a {
color: #ffffff;
margin: 0 15px;
text-decoration: none;
}

.navbar-inverse .navbar-nav > li {
position: relative;
}

.navbar-inverse .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
list-style: none;
padding: 8px;
min-width: 220px;
border-radius: 4px;
}

.navbar-inverse .dropdown:hover .dropdown-menu {
display: block;
}

.dropdown-menu a {
color: #00274d;
display: block;
padding: 10px;
}