Adding Form Elements to the Navigation Bar

I’m developing an application for my employer that is intended to match the design of our public website very closely. One of the elements of that design is a text field and button on the far right of the top navigation bar, similar to what you can see on OTN:

search_example

To get started, I rummaged about in the Shared Components settings a bit and set the application navigation to appear at the top of the page instead of on the left. I then added a Static Content region to the Page Navigation section of the page (above the Breadcrumb Bar section) and set the region’s Template to Blank with Attributes. I then placed a Text Field (Template: Hidden) and an Icon [Hot] Button (Icon CSS Class: fa-search) in the Items area of my new region:

apex_designer_1

That gave me the elements that I wanted and, when I reviewed the page source, I could see that the menu div (highlighted green) and my search region div (highlighted red) were right next to each other:

page_source_1

However, when I looked at how the page rendered, everything was stacked underneath the menu on the left side of the screen:

page_look_1

Knowing that this was just a question of styling and wishing to apply that style only to this single region, text box, and button, I switched back to the Page Designer and gave CSS Classes to each of them:

region_class

item_class

button_class

 

With these new handles, I tried floating the region to the right, the text box (within that region) to the left, and the button (also within that region) to the right. It didn’t quite get me what I wanted yet because my content was still below the navigation menu, but it was closer:

CSS_1

Now, I have developed in Apex since version 2.x so I’m very comfortable with PLSQL and HTML, but I rarely touched the styling before the past year or so. With limited experience like that, I still come across a few things that I’m not quite sure of how to accomplish. So, when I tried floating the navigation menu (t-Header-nav-list class) to the left and it didn’t work, I decided that I should ask for some help. I created the example application you’ve been seeing in these screenshots, posted a question on the Application Express OTN forum with a description of what I wanted to do, what I had tried, and a link to my example, and set my mind to some of the other tasks on my list for the day. In less than four hours, community member Mahmoud Rabie offered this suggestion:

CSS_2

I added that snippet to my Theme Roller Custom CSS and, as I wanted, my content moved up “on” the navigation bar instead of under it. Once I styled the header div to make the Search region background color match the rest of the bar and set a 5 pixel margin on the button, I was satisfied with the result:

page_look_2

FYI- if anyone wishes to copy the CSS I used to achieve the look you see above, here you go:

div.t-Header-nav {
background-color: #164678;
}

.t-Header .a-MenuBar.a-MenuBar–overflow {
overflow: hidden;
width: 70%;
}

div.Search_Region {
float: right;
}

div.Search_Values {
float: left;
}

button.Search_Button {
float: right;
margin: 5px;
}

All that’s left to do now is to add a dynamic action to give it some functionality! I hope that this will be as useful for someone else as it was educational for me.

Advertisements
Adding Form Elements to the Navigation Bar

2 thoughts on “Adding Form Elements to the Navigation Bar

  1. Hi,
    i appriciate you share your efforts and success with us. i have a question. if you want to provide it on the navigation bar itelsef, i mean the search items, how you would put them on the navigation bar?

    if you visit the http://www.coursera.org and examin its search box, its on the navigation bar with the login or sign up buttons.

    could you tell us how you would do that?
    as a mater of starting point, i could give you the following Post, which explain what i am saying here. i tried it , but it is not working properly.

    Thank you for sharing such nice information.
    Regards.

    Like

    1. Art Rinberger says:

      Hi Muhammad,

      Thank you for your question, but I have to admit that my CSS skills are fairly rudimentary and I’m hesitant to offer advice where styling is concerned because I feel that you would get a better answer by asking for help from the experts that frequent the OTN forum, as I did. Having said that, if you haven’t been able to modify my example to match your desired look, I can think of another way to possibly achieve the look you are trying for.

      I haven’t tested how well this works, but you could make a new page template (don’t start from nothing; you can save yourself a lot of effort by copying an existing template with a new name) and move the substitution string for one of the regions up next to the navigation bar substitution string. If it works the way I hope it does, creating a new page in your application with that template should allow you to drag a new region up there, where you can add the items you desire. It may require some additional CSS to change coloring or margins or something, but I think that would get you most of the way there if it works.

      Again, though, I feel like the best answer I can give is that you should set up on https://apex.oracle.com an example of what you have already tried and ask for assistance on the OTN forum, located at https://community.oracle.com/community/database/developer-tools/application_express

      Thanks,

      Art

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s