Issues with searchbar placement in top right corner of the menu

Support
#1

Hi,

I’m having trouble placing the language switcher + search bar in my navbar in order for it to look like this. Current state of my menu.
So far, I’ve tried the following:

  • Using a menu segment to contain them. Was unable to style the menu segment via a dedicated CSS class (added via the main Menu structure panel).
  • Wrapping them in a widget area, than adding a <br> to separate them from the rest. The br tag doesn’t work as usual here though, it just creates a roughly 100px-wide horizontal space
  • This very crude current configuration with no wrapper.
  • edit: I am using UberMenu in conjunction with the X theme CSS customization feature.

Would you guys have an alternative solution to suggest? Let me know if you need more info :wink:

Thank you in advance!
E.

#2

Hi There,

You can create a drop down menu on your top bar.

You can active the topbar by going to Theme Options > Header

Add

<div class="topbar-dropdown">
      <a href="#">Lenguage Switcher</a>
   <ul>
      <li><a href="URL-Goes-Here">EN</a></li>
      <li><a href="URL-Goes-Here">FR</a></li>
          </ul>
</div>

Add the following code to Theme Options CSS and adjust according to your needs

    .topbar-dropdown {
       display: inline-block;
       vertical-align: top;
       position: relative;
    }
    .topbar-dropdown > a {display: block; height: 100%}

    .topbar-dropdown ul {
       display: none;
       position: absolute;
       top: 100%;
       background: #ff6600;
       margin: 0;
       padding: 10px;
       min-width: 150px;
       list-style: none;
    }

    .topbar-dropdown:hover ul {
       display: block;
    }

Another good alternative would be to switch to PRO instead of X , which allows you to builder really customizable headers out of the box.

Hope it helps

#3

Thank you so much for your help! I ended up switching to Pro as you advised. However, I can’t seem to wrap my head around how to build the top right section using the Header Builder. What kind of elements should I to use to integrate custom dropdowns? Is that possible with the X Pro header builder? Thanks again!

#4

Hi,

You can create another menu in Appearance > Menu with dropdown.

Then add a navigation inline element in your header and select your menu.

Hope that helps.

#5

Okay, so just a caveat for other users: menu items that are customized through Uber Menu don’t work well (or even at all) with Pro. You just have to build regular and customize your own elements through the Header Builder. Use the demo headers for reference if you have a doubt.
Again, thanks for your help, Paul!

#6

You’re welcome!
We’re glad we were able to help you out.