Overview:
1. Purpose.
2. Benefits.
3. Steps.  
4. Screen shots.
5. Conclusion.
1.  Purpose:
This document describes how to Use an Favicons in Apex 5 Top Navigation Menu.
           In Apex 5, Navigation Menu Position is either Side or Top Navigation.
In Side Navigation menu, if we apply the favicons then it will display the menu correctly. But while applying Top Navigation Menu favicons will not be displayed. Also there’s a requirement to show only favicons in place of menu labels in Top Navigation Menu.
   2.  Benefits:
 We can display only ICONS / Images in Apex Top Navigation Menu.
   3.  Steps:
Step1: Copy an Navigation Bar Template to a new name Template.
Step2: Go to New Template, apply the following changes:
1. List Template Current
<li class=”t-NavigationBar-item is-active #A02#”>
  <a style=”background-color:#e2e1de; line-height:2.0rem” class=”t-Button t-Button–icon t-Button–header t-Button–navBar” href=”#LINK#” role=”button” title=”#TEXT_ESC_SC#”
      id =”list_id”>
      <span style= “font-size: 3.5rem;Color:black” class=”t-Icon #ICON_CSS_CLASSES#”></span>
  </a>
</li>
2. List Template Current with Sublist Items
<li class=”t-NavigationBar-item is-active #A02#”>
  <button style=”background-color:#e2e1de; line-height:2.0rem” class=”t-Button t-Button–icon t-Button t-Button–header t-Button–navBar js-menuButton” type=”button” id=”#LIST_ITEM_ID#” data-menu=”menu_#LIST_ITEM_ID#” title=”#TEXT_ESC_SC#”>
      <span style= “font-size: 3.5rem;Color:black;” class=”t-Icon #ICON_CSS_CLASSES#”></span><span style= “vertical-align:middle;” class=”a-Icon icon-down-arrow”></span>
  </button>
3. List Template Noncurrent
<li class=”t-NavigationBar-item #A02#”>
  <a style=”background-color:#e2e1de; line-height:2.0rem” class=”t-Button t-Button–icon t-Button–header t-Button–navBar” href=”#LINK#” role=”button” title=”#TEXT_ESC_SC#”
      id =”list_id”>
    <span style= “font-size: 3.5rem;Color:black;” class=”t-Icon #ICON_CSS_CLASSES#”></span>
  </a>
</li>
4. List Template Noncurrent with Sublist Items
<li class=”t-NavigationBar-item #A02#”>
  <button style=”background-color:#e2e1de;” class=”t-Button t-Button–icon t-Button t-Button–header t-Button–navBar js-menuButton” type=”button” id=”#LIST_ITEM_ID#” data-menu=”menu_#LIST_ITEM_ID#” title=”#TEXT_ESC_SC#”>
      <span style= “font-size: 3.5rem;Color:black;” class=”t-Icon #ICON_CSS_CLASSES#”></span><span style= “vertical-align:middle;color:black” class=”a-Icon icon-down-arrow”></span>
  </button>
Step3: Go to Application Navigation Attributes > User Interface > Navigation Menu > Position- Top > List Template – Select New Template which we created.
4. Screen shots: 

5. Conclusion:

Thus we can apply the Top Navigation Menu with Favicons/Images in Oracle Apex 5.
Share this post
Recommended Posts
Showing 3 comments
  • Avatar
    koloo kumo
    Reply

    lovely, works like a charm.

  • Avatar
    Unknown
    Reply

    If i want to add description with the image then where i suppose to make changes?

  • Avatar
    arif
    Reply

    Oracle apps and Fusion Self Paced Training Videos by Industry Experts. Please Check oracleappstechnical.com

Leave a Comment

Start typing and press Enter to search