Kehinde Adeyemi's Blog

Display an image on a Navigation Bar in Oracle APEX

Kehinde Adeyemi's photo
Kehinde Adeyemi
·

2 min read

Display an image on a Navigation Bar in Oracle APEX

Do you still run #orclapex applications that display a company logo as seen below?

Such logos are less conspicuous in most cases. Well, you might want to take a notch up and have something like the below:

Read this short article to see how I achieved it in very simple steps.

Step 1

On Global Page 0, Create a Static content region, position it in the 'Dialogs, Drawers and Popups' or 'Inline Dialog' (older versions of Oracle APEX) section of your page and add the below HTML. In this scenario, I have read the image from the static application images folder "#APP_FILES#orclapex.png" , but you may get an image from a URL of your choice and make it dynamic as well based on conditions.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.imgcontainer {
  position: relative;
}

.centeredimage {
  display: block;
  width: 100%;
  height: auto;
}

hr.solid {
  border-top: 1px solid #bbb;
}

</style>
</head>
<body>
<br/> 
<div class="imgcontainer">
<br/>
<img src="#APP_FILES#orclapex.png" alt="" class="centeredimage" style="margin-left: auto;margin-right: auto;width: 50%;height: 50%;background-color: transparent;">
<hr class="solid">
</div>
</body>
</html>

Step 2

Add CSS class 'underNavBar' to the appearance section of Page 0

Add a Page Load event on Page 0 and include below javascript

$('.underNavBar').prependTo('#t_TreeNav');

Save your changes and voila!!

Conclusion

This piece in my own opinion is kinda old but gold.

Oracleorclapexnavigation