Company Logo & Name on Navigation Menu Bar based on Database data

In this tutorial, I demonstrate how to create a company logo on the navigation menu. I show the process step by step, from logging in with different employees to setting up the logo region and adding the logo image. The video covers creating a new region, defining attributes, selecting image types, and adjusting CSS settings for a visually appealing result. Viewers are instructed to follow along to implement the logo successfully.

1. Introduction

In this section, we provide an overview of the process to create a company logo on the navigation menu. This includes:

• Creating a new region in the navigation menu.
• Defining the attributes for the logo image.
• Resizing the image to fit the navigation menu.
• Adding links and CSS for styling.
• Adjusting CSS styles for responsiveness.

2. Creating a New Region

To start, we need to create a new region in the navigation menu where the logo will be placed. This involves:

• Accessing the Navigation Menu Settings:
• Log in to your application.
• Navigate to the settings or customization options for the navigation menu.
• Creating the Region:
• Select the option to add a new region.
• Name the region appropriately, such as "Logo Region".
• Define the region's position within the navigation menu.

3. Defining Image Attributes

Next, we define the attributes for the logo image. This includes selecting the image type, specifying the file name, and setting the MIME type. The following SQL query retrieves the necessary image attributes from the database:

 

SQL

xxxxxxxxxx

 

1

SELECT DEPA_IMAGE           AS product_image,

2

       DEPA_IMAGE_NAME      AS alt_text,

3

       DEPA_IMAGE_NAME      AS filename,

4

       DEPA_IMAGE_MIMETYPE  AS mimetype

5

  FROM APNO_DEPARTMENT

6

  JOIN APNO_EMPLOYEE ON (DEPA_ID = EMPL_DEPA_FK)

7

 WHERE LOWER(EMPL_EMAIL) = LOWER(:APP_USER);

• DEPA_IMAGE: The binary data of the image.
• DEPA_IMAGE_NAME: The name of the image file.
• DEPA_IMAGE_MIMETYPE: The MIME type of the image (e.g., image/png).

4. Resizing the Image

We then resize the image to fit appropriately within the navigation menu using CSS. This ensures that the logo is displayed correctly regardless of the screen size.

 

CSS/SCSS

xxxxxxxxxx

30

 

1

<style>

2

.navigation_bar_logo {

3

    max-height: 25px; 

4

    padding-left: 0px;

5

    border-radius: 20px;

6

}

7

​

8

.navigation_bar_logo_title {

9

    margin-left: 10px;

10

    color: white;

11

    font-size: calc(14px + 0.5vw) !important; /* Adjusts based on viewport width */

12

    white-space: nowrap; /* Prevents the text from wrapping */

13

}

14

​

15

@media (max-width: 768px) {

16

    .navigation_bar_logo_title {

17

        font-size: calc(10px + 1vw) !important; /* Smaller base font size for tablets */

18

    }

19

}

20

​

21

@media (max-width: 480px) {

22

    .navigation_bar_logo_title {

23

        font-size: calc(8px + 2vw) !important; /* Larger scaling factor for mobile phones */

24

    }

25

}

26

​

27

# Navigation_custom_menu_bar .t-Form-inputContainer {

28

    padding: 5px 0 0 0 !important;

29

}

30

</style>

• .navigation_bar_logo: Styles for the logo image, including height and padding.
• .navigation_bar_logo_title: Styles for the logo text, including margin, color, and font size.
• Media Queries: Adjustments for different screen sizes to ensure responsiveness.

5. Adding Links and CSS

To enhance the functionality and appearance, we add links and additional CSS styles. This allows users to click on the logo and be redirected to a specific page.

 

HTML/XML

xxxxxxxxxx

 

1

<a href="f?p=&APP_ALIAS.:1:&APP_SESSION.::&DEBUG.:::">

2

    <font class="navigation_bar_logo_title">&P0_DEPA_NAME.</font>

3

</a>

• href Attribute: The link to the home page or a specific page within the application.
• &P0_DEPA_NAME: A placeholder for the department name, which will be dynamically replaced.

6. Adjusting CSS Styles

Finally, we adjust the CSS styles to ensure the logo and text are visually appealing and responsive. This includes fine-tuning margins, paddings, and font sizes.

7. Retrieving the Department Name

To display the department name along with the logo, we use the following SQL query:

 

SQL

xxxxxxxxxx

 

1

SELECT DEPA_NAME || ' - (' || DEPA_LOCATION || ')'

2

  FROM APNO_DEPARTMENT

3

  JOIN APNO_EMPLOYEE ON (DEPA_ID = EMPL_DEPA_FK)

4

 WHERE LOWER(EMPL_EMAIL) = LOWER(:APP_USER);

• DEPA_NAME: The name of the department.
• DEPA_LOCATION: The location of the department.

This query concatenates the department name and location, providing a comprehensive label for the logo.

Summary

By following these steps, you can successfully add a company logo to your navigation menu. This includes creating a new region, defining image attributes, resizing the image, adding links and CSS, and adjusting styles for a polished result.

Call to Action:

• Watch the Tutorial: Follow along with the video tutorial to implement the logo successfully.
• Review the Code: Use the provided code snippets to set up the logo region and adjust styles.
• Test Responsiveness: Ensure the logo and text are responsive and visually appealing on different devices.

 {fullWidth}