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

Support
#1

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!

#2

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.

#3

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?

#4

Hey,

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

#5

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

#6

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

#7

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?

#8

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!

#9

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.

#10

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.

#11

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

#12

Glad we could help.

Cheers!