Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Floating items to the right of a top menu

Art RJan 20 2016 — edited Jan 20 2016

Hi Guys,

I'm working on a new application that uses the Universal Theme with the navigation menu across the top and I would like to have a text field and button appear on the right side of it, but I guess I need a little help to make it happen. So you can see my progress, I've created a public demo at https://apex.oracle.com/pls/apex/f?p=68622.

To get what I have so far, I gave CSS classes to the region (which is located in the "Page Navigation" section), the text field, and the button, and added this bit of styling to the Theme Roller:

div.Search_Region {

  float: right;

}

div.Search_Values {

  float: left;

}

button.Search_Button {

  float: right;

}

If you view the page source, you will see that this puts the region div next to the menu div and moves the contents to the right side of the screen, but it's still visually below the menu. Since the region div is already being floated right, I tried floating the menu left by also adding this to my custom CSS:

div.t-Header-nav-list {

  float: left;

}

It didn't have any effect that I could see, though. Having come this close, I know it can be done, but I'm not sure how to go about it. Would someone please take a look, explain to me why floating the menu left didn't work, and help me figure out how to do this? I would appreciate it greatly.

Thanks,

Art Rinberger

This post has been answered by Mahmoud_Rabie on Jan 20 2016
Jump to Answer

Comments

Mahmoud_Rabie
Answer

Hi Art R

I would like to have a text field and button appear on the right side of it, but I guess I need a little help to make it happen.

Please add this code to your CSS

.t-Header .a-MenuBar.a-MenuBar--overflow {

    overflow: hidden;

    width: 70%;

}

I hope that solves your poblem

Regards

Mahmoud

Marked as Answer by Art R · Sep 27 2020
Art R

Hi Mahmoud,

That was exactly what I was looking for. Thanks for your help!

Art

Mahmoud_Rabie

You are welcome

1 - 3
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Feb 17 2016
Added on Jan 20 2016
3 comments
1,975 views