Center Logo - Right-Align Menu Toggle

Support
#1

Hello! I’m trying to center the logo and right-align the menu toggle on mobile displays. Is there a good way to do that in the header builder?

Website for reference: http://aanda.co/adamsjones/home/

Thanks!

#2

Hi @applesandarrows,

Yes, that is possible:
1.) Container settings should be like this:

2.) Inspect menu toggle then on Customize Tab > Element CSS: Add the following:

$el {
  position:absolute;
  right:0 /*Adjust this if you need a little space on right*/
}

Hope this helps.

#3

Thank you! That’s close - but that css also messes with the off-canvas menu triggered by the toggle. Is there a way to separate those?

#4

Hi @applesandarrows,

Let’s update the selector to this:

$el.x-anchor-toggle {
    position: absolute;
    right: 10px;
}

Hope this helps.

#5

We’re SUPER close. Now, on mobile (I see it on my iPhone, but not in the preview), the menu overlaps with the logo. I’ve got the logo image set to scaling. Is there a way I can ensure the logo and the menu don’t overlap, but not shrink the logo on other devices?

Thank you for all your help!

#6

Hi There @applesandarrows

For mobile, it’s hard to keep the menu on right without shrinking your logo.

Could you please try updating the above code, with the following and see if that helps.

@media (min-width: 420px) {
  $el {
    position:absolute;
    right:0 /*Adjust this if you need a little space on right*/
  }
}

Hope that helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.