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:

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:

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:

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

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:

 

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:

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:

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:

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.

Advertisement