navBar is not displayed on custom community theme layout

Question

I am trying to implement a custom community theme layout and add use default navigation bar there. For now, I am using Stella pre-built theme and the navigation bar is not displayed there. However, if I change the template to pre-build Customer Service, the navigation bar is displaying fine. At the same time, the search element and profile menu displayed correctly all-time on both pre-built themes. Could you please let me know what is the issue and how can I implement a custom theme layout with the default navigation bar? I need this for the home page.

The code I am using is pretty simple and taken from the documentation:

<aura:component implements="forceCommunity:themeLayout" description="connectHomePageLayout">
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<div class="navigation">
    {!v.navBar}
</div>
<div class="searchRegion"> 
    {!v.search} 
</div> 
<div class="profileMenuRegion">
    {!v.profileMenu}
</div>

Answer 1

The docs do not state this, but it turns out you have to add some more themeXXXX components to the themelayouts.

I was able to work this out by looking at the css classes on the page.

Do something like this:

<aura:attribute name="themeFooter" type="Aura.Component[]" required="false" />
<aura:attribute name="themeHeader" type="Aura.Component[]" required="false" />

<div>
 <div class="themeHeader">
    {!v.themeHeader}
 </div>
 <div class="main" >
   <div class="content">
     {!v.body}
   </div>
   <div class="footer">
     {!v.themeFooter}
   </div>
 </div>
</div>

I haven't tried this, but following the same idea, you can probably add the themeHero to get that to show up too.