Centre logo with menu stacked on top for mobile

[noajou]

Hello there,

I am currently attempting to make my clients logo appear appealing when looking at it on a mobile browser.

More specifically, I would like the menu hamburger to be stacked on top of the logo while the logo is centred on screen.

I have been able to find and use this code which worked well for centring the logo - but for some reason this only centres the logo when looking at it on the below 979px screen option on my laptops browser. It does not seem to be the same on my mobile browser (where the logo and menu are inline instead). EDIT: I just realised that the logo is only inline on my front page, other pages display it correctly. I hope this is helpful in finding a solution.

@media (max-width: 979px){
    .x-navbar {
        padding: 8px 0;
    }
    a.x-brand.img {
        float: none;
        text-align: center;
    }

    a#x-btn-navbar {
        float: none;
        text-align: center;
    }
  .masthead-inline .x-btn-navbar {
    margin-top: 10px;
  }
}

I will attach an image below of what I would like it to look like, except for the hamburger which should be on top of the logo.

With Gratitude,
Noah

[rad]

Hi @noajou,

Thanks for reaching out.

Please remove this code from your CSS,

[column fade="true" fade_animation="in-from-left" fade_animation_offset="45px"]

It’s just above your added CSS and it’s affecting your CSS.

Thanks!

[noajou]

Hi Rad,

Thank you for your response.

Unfortunately I cannot find this code in my CSS - I looked in the global CSS code for the site and that for my main page. Could you give me a pointer as to where exactly I can find it?
Oh, also there is a potential that the site in which you are finding that code is not the one I am talking about (I think I have a few sites linked to this account). Just in case, the site I am talking about is: henrinawrocki.org

Warm Greetings,
Noah

[rad]

Hi @noajou,

Yes, that’s the site I was checking. And it’s in your global custom CSS (Theme Options CSS).

And its there just before that CSS, the reason it’s not working.

Thanks!

[noajou]

Mhm, I see what you mean. But unfortunately that code is not in my Global CSS console (i.e. Theme Options CSS). This is all I see when I open that:

Is there any other setting that I maybe clicked and causes this same string of code to appear?

Thank you for your help.

[thai]

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

• Link login to your site
• WordPress Admin username / password

Thanks.

[noajou]

Sure - I can do that.

[thai]

Hi There,

I could see that the logo is center right now:

And couldn’t find the column shortcode in your custom CSS anymore. Did you remove it?

Cheers!

[noajou]

Hey Thai,

I didn’t remove it, but I am happily baffled at the fact that it is now also working for me and perfectly visible on my mobile browser. Very odd to have time solve this issue, but I want to thank you for your support!
I am really enjoying this theme and look forward to experimenting more with it.

With Gratitude,
Noah

[ruenel]

Hey Noah,

We’re glad that your issue has been resolved already.
Enjoy using the theme. If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[noajou]

Hi there,

So I will actually continue this thread for a tiny bit longer, unfortunately.

It turns out that the menu is now placed correctly, and on the mobile browser I use it works fine.
However, my client just attempted using the site on Safari and the menu doesn’t open when it is clicked on. Do you know what might be causing this issue and how to fix it?

Warm Greetings,
Noah

[ruenel]

Hello Noah,

I am also experiencing the same when I viewed your site. I noticed that there is a JS error on the page coming from this code:

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"c4e0618c5d6ba58914376e2bb","lid":"af1a936c68","uniqueMethods":false}) })</script>

which you have added in one of the widget area. Please remove this code and test your site again.

Please let us know how it goes.

[noajou]

Hi there,

That did indeed solve the issue with the menu not being responsive. Thank you!

By removing this code the mailchimp pop-up that I had added to the site is removed, however, which I would really like to stay on-site.
I had looked at a few other options re: how to add a pop-up subscriptions, but none worked well or they were too expensive. Is there a work-around that I am not aware of to add a mailchimp pop-up element to the site?

[christian]

Hey Noah,

You might want to take a look at ConvertPlus plugin which comes bundled in X. You can connect MailChimp to it.

Thanks.

[noajou]

Oh it is included? Great, thank you. I will try that out.

[thai]

You’re welcome.