Place Header Logo on Right Side of Menu in X

Support
#1

Hello,
Using the original version of X (not Pro), can anyone tell me how to place the logo on the right side of the header menu? It defaults to the left side and I haven’t figured out how to change that.

Any help would be appreciated. Thank you!

#2

Hello @StickAndGrow,

Thanks for writing in!

Please add following CSS to swap position of logo and navigation:

  @media only screen and (min-width: 900px) {
   .masthead .x-nav {
	float: left;
	width: 80%;
}
.x-navbar .x-brand {
	float: right;
	width: 20%
}
}

Let us know how it goes.

Thanks.

#3

Hurray! That works. Thank you! Is there a way to move the logo even farther to the right so it lines up with the edge of a page on desktops?

#4

Hello @StickAndGrow,

In that case please replace previous code with following:

  @media only screen and (min-width: 900px) {
   .masthead .x-nav {
	float: left;
	width: 90%;
}
.x-navbar .x-brand {
	float: right;
	width: 10%
}
}

Thanks.

#5

Thank you! These cods all place the logo on the right on desktops (woohoo). However, on mobile the logo is still on the left.

Can you help?

Thanks!

#6

Hi again,

Please replace the previous code with the following code:

.masthead .x-nav {
	float: left !important;
}
.x-navbar .x-brand {
	float: right;
}

@media screen and (max-width: 979px) {
  .masthead-inline .x-btn-navbar {
    float: left !important;
  }
}

Cheers!

#7

Hello. Thank you. While that worked, it messed up a bunch of my other code. Now my desktop menu is no longer centered. What can I adjust to correct this.

Also, I’m trying to center the hamburger menu on the mobile homepage and have it be a wider bar rather than the square. Is there one series of code I can use to do all of this at once?

Thank you!

#8

Hey there,

You may try replacing the previous code with this:

.x-navbar .x-brand {
	float: right;
}

@media screen and (max-width: 979px) {
  .masthead-inline .x-btn-navbar {
    width: 50%;
    text-align: center;
  }
}

Hope this helps!

LOGO and MENU positions reversed
#9

Hi! I would also like to put the logo to the right-hand side of the screen and the menu to the left-hand side of the screen. Yet the very last code although it places the logo on the right it leaves the menu on to the right side too when I’d prefer it on the left. As if the text was changed from sides to the right to sided to the left, but still keeping the menu on top of everything.

#10

Hello @DigitalTrustBuilders,

Thanks for updating this thread. Take note of the code given by @Prasant. The .x-navbar .x-brand must be floated to the right while .masthead .x-nav to the left to swap out the positions of the logo and navigation.

The code above in the older threads serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.