Docs

[aloraguerrero]

Hi, I’m loving the theme so far. But I hope you could help me with my website’s mobile interface.

Right now, the mobile navbar (hamburger icon) is right below the site’s logo. I would like to have it placed on the right-most side, next to the logo. I also want to move the search bar next to left of the navbar.

The edit should look like this: LOGO on the left-most side, Search button (magnifying glass icon), then Navbar (hamburger icon).

My site’s logo is a bit large right now, but I’m okay with making it smaller to fit more elements at the top.

What code should I use?

Thanks!

[Rad]

Hi there,

Thanks for posting in.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[aloraguerrero]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for providing the information.

1] To move the mobile menu next to the logo, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .x-navbar .x-brand {
    max-width: 220px;
    float: left;
    text-align: left;
  }

  .masthead-inline .x-btn-navbar {
    float: right;
    clear: none;
    display: inline-block;
    margin-top: 50px;
  }
}

2] For your search icon placement, regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[aloraguerrero]

This reply has been marked as private.

[aloraguerrero]

This reply has been marked as private.

[Christopher]

Hey there,

Thanks for writing in! 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. Thanks for understanding. Take care!

[aloraguerrero]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    margin-right:20px;
  }
}

You may change 20px to adjust the alignment.

Hope that hekls

[aloraguerrero]

Thank you so much!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts