CODEWITHSUNDEEP
oracle-databaseoracle-apex
User104163
User104163

Reputation: 589

In Oracle Apex how do you hide the Navigation Bar?

I'm using the latest version Oracle APEX 22.1.4.

How do you hide the Navigation Bar?

screenshot

Upvotes: 0

Views: 2594

Answers (1)

Koen Lostrie
Koen Lostrie

Reputation: 18780

This cannot be done declaratively but there is a page template that is called "Minimal (No Navigation)" that does exactly this. Note that when you hide the navigation bar, you also lose the hamburger menu that opens/closes the navigation menu on the left side.

To set the page template, check the page attributes:

enter image description here

Update: since this doesn't seem to work for you, here is another workaround. Copy the page template "Standard" to "Standard - no nav bar (custom)" and select that template for your page.

Then in the new page template (shared components > templates > edit templates"Standard - no nav bar (custom)") , remove the lines like shown below in the "Header" section:

<!DOCTYPE html>
<html class="no-js #RTL_CLASS# page-&APP_PAGE_ID. app-&APP_ALIAS." lang="&BROWSER_LANGUAGE." #TEXT_DIRECTION#>
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <meta charset="utf-8">
  <title>#TITLE#</title>
  #APEX_CSS#
  #THEME_CSS#
  #TEMPLATE_CSS#
  #THEME_STYLE_CSS#
  #APPLICATION_CSS#
  #PAGE_CSS#
  #FAVICONS#
  #HEAD#
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="t-PageBody t-PageBody--hideLeft t-PageBody--hideActions no-anim t-PageTemplate--standard #PAGE_CSS_CLASSES#" #TEXT_DIRECTION# #ONLOAD# id="t_PageBody">
<a href="#main" id="t_Body_skipToContent">&APP_TEXT$UI_PAGE_SKIP_TO_CONTENT.</a>
#FORM_OPEN#
<header class="t-Header" id="t_Header" role="banner">

-- delete lines below --

  #REGION_POSITION_07#
  <div class="t-Header-branding">
    <div class="t-Header-controls">
      <button class="t-Button t-Button--icon t-Button--header t-Button--headerTree" aria-label="&"APP_TEXT$APEX.TEMPLATE.MAIN_NAV_LABEL"." title="&"APP_TEXT$APEX.TEMPLATE.MAIN_NAV_LABEL"." id="t_Button_navControl" type="button"><span class="t-Header-controlsIcon" aria-hidden="true"></span></button>
    </div>
    <div class="t-Header-logo">
      <a href="#HOME_LINK#" class="t-Header-logo-link">#LOGO#</a>
      #AFTER_LOGO#
    </div>
    <div class="t-Header-navBar">
      <div class="t-Header-navBar--start">#BEFORE_NAVIGATION_BAR#</div>
      <div class="t-Header-navBar--center">#NAVIGATION_BAR#</div>
      <div class="t-Header-navBar--end">#AFTER_NAVIGATION_BAR#</div>
    </div>
  </div>
  <div class="t-Header-nav">#TOP_GLOBAL_NAVIGATION_LIST##REGION_POSITION_06#</div>

-- delete lines above --

</header>

Upvotes: 2

Related Questions