Introduction
In Apex 5, Navigation Menu Position is either Side or Top Navigation.
In the 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.
Benefits
We can display only ICONS / Images in Apex Top Navigation Menu.
Steps to follow
Step 1:
Copy Navigation Bar Template to a new name
Template.
Step 2:
Go to New Template, apply the following changes:
- 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>
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>
- 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>
- 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>
Step 3:
Go to Application Navigation Attributes -> User Interface
-> Navigation Menu -> Position- Top -> List Template ->
Select New Template which we created.
Call To Action:
For Oracle apex development and customization please do visit our company website https://doyensys.com/
Conclusion:
Thus we can apply the Top Navigation Menu with Favicons/Images in Oracle Apex 5.
