Docs

[nikiniki9doors]

I am having such a difficult time figuring out how to create a menu that looks like the attached. I didnt realise this plugin was for the more advanced programmer than the everyday layman.

Can you please give me advice on how to set up a menu like attached?

I dont need a logo or icon in the menu at all.

Integrity STACK

[Rad]

Hi there,

Thanks for posting in.

Would you mind providing your site’s URL? And the URL where the screenshots are taken.

Thanks!

[nikiniki9doors]

http://www.curatedlisbon.com

I dont have the URL for where the screenshots are taken as I designed it in Sketch 3

[Thai]

Hi There,

Please add the following CSS:

li.menu-item.x-menu-item.x-menu-item-search {
    float: right;
}
li.menu-item.x-menu-item.x-menu-item-search a {
    font-size: 10px;
    text-transform: uppercase;
    color: #000000;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

Hope it helps 🙂

[nikiniki9doors]

Hi Thai

Thanks for this … also wanted the languages to be to the right but with dividers there only and drop down vertically above one another vs horizontally.

Is there a way to control how the mobile version of the menu looks? Right now its showing with hamburger symbol and word MENU in brown but Id like to be just black hambgurger without menu and still have the languge and search show like in the original attached picture for mobile.

also is there a way to remove the text logo/picture logo? Right now I have it set to a white font so you dont see it.

[Rad]

Hi there,

Please add this CSS as well,

  #menu-item-136.ubermenu-item {
  float: right;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  }

.x-brand {
display: none;
}

And please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.ubermenu-responsive-toggle').each( function(){

jQuery(this).html( jQuery(this).find('i') );

} );

Cheers!

[nikiniki9doors]

Hey Rad,

Thank you for this

The divider lines dont go to the bottom there is a white gap? and is there a way to place the language floating right BEFORE the search? so its language and then search?

Also I cant get the drop down to go vertical vs horizontal across the entire menu.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.ubermenu .ubermenu-submenu-drop.ubermenu-submenu-align-full_width {
    max-width: 200px !important;
    left: calc(100% - 200px) !important;
}
.ubermenu .ubermenu-submenu .ubermenu-column-auto {
    width: 100% !important;
}
body.x-navbar-fixed-top-active .x-navbar-wrap, #menu-item-136.ubermenu-item {
    min-height: 57px !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[nikiniki9doors]

Thanks Nabeel.

That fixed the vertical menu issue – however search still comes before the language drop down?

Also for the responsive. Is there a way to control what the hamburger icon looks like – color wise, sizing and position?

[Christopher]

Hi there,

and is there a way to place the language floating right BEFORE the search?

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Please add following code in Customize -> Custom -> Global CSS :

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
    font-size: 25px;
    color: red;
}
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    float: right;
}

Hope it helps.

[Lely]

Hello There,

To move the search at the end, please try adding this script on Appearance > Customize > Custom Javascript:

jQuery( function( $ ){
   $( ".x-menu-item-search" ).insertBefore( "#menu-item-136" );
});

Yes, we can use custom CSS to control the looks of hamburger icon. To help you better, do let us know how you want it so we can be specific on our suggestion. Thank you.

[nikiniki9doors]

Hey Lely

I’d like the hamburger menu to be 3 black lines – 30px x 4px 100 radius each spaced 4px apart.

That hamburger menu should sit at 20x and 16y axis.

Does that help?

Thanks

[Lely]

Hi There,

Please add this custom CSS:

.ubermenu-responsive-toggle .fa {
    font-size: 30px;
    color: #000;
}
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
    padding-top: 16px;
    padding-left: 20px;
}

We’re using fontawesome bars icon:http://fontawesome.io/icon/bars/
Unless we add background color, I am not sure what you mean my 100 radius. Can you give us screenshot?

[nikiniki9doors]

Actually dont worry about the radius what you did worked perfectly fine. Thanks Lely.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts