Logo next to main menu and search icon is very small?

Hi there,

I’m new here, I just love the X template so far! I’m using the ubermenu extension and I have some issues with the following:

  • I got my logo placed inline but it gets placed on top of the menu (see attachment). How can I allign the logo on the left next to the menu and add some padding to make it look good?
  • Second is the placeholder for the searchbar. The loop is shown but very small and not alligned correctly within the menu. How can I achieve this?

Thanks in advance and keep up the good work!

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

Thanks for reaching out Joao. But I have an “under construction” page up front so I cannot show it to you via a link (which would be www.gamepros.nl)

Or is there a workaround on this?

Hey,

Please, share to us the credentials to access the original site.

I just did, hopefully you can help me out here.

Hi,

To fix it, you can add this in X > Launch > Options > CSS

@media screen and (min-width: 960px) {
.ubermenu-responsive-default.ubermenu {
    display: inline-block!important;
    margin-top:25px;
}
}

.menu-item.x-menu-item.x-menu-item-search {
    display:inline-block;
    padding: 15px 20px;
}

.x-brand img {
    margin: 10px 20px 20px;
}

Hope that helps

Thank you so much Paul! It looks so much better now. Could you perhaps tell me how to make the menu allign with the containter on the right side?

Hi again,

You can try adding the following code in your Customizer as well:

@media screen and (min-width: 960px) {
  .ubermenu-responsive-default.ubermenu {
      position: absolute;
      right: 0;
  }
}

Let us know how this goes!

Thanks but the whole menu is now alligned at the right side (see image). What I would like is to have to menu divided for the whole width of the screen, but next to the logo.

Hi,

You can try adding this in X > Launch > Options > CSS

@media screen and (min-width: 960px) {
.ubermenu-responsive-default.ubermenu {
    width: calc(100% - 150px);
}
}

Hope that helps.

Paul, spot on! It looks exactly the way I wanted it to look so thank you very much! :thumbsup:t2:

Glad we could help.

Cheers!