Center the header logo

[s_gogos]

Hello guys,

Can you tell me how center only the logo in my website’s header?
For some reason it isn’t in the exact center and you can notice it clearly in the mobile version.

Thanks in advance,
Stergios (worldvespa.net)

[s_gogos]

No-one???

[beornbjorn]

I’m not 100% sure it’s the solution, but when i changed the width of your logo from px to % seems to fix the issue.

[paul.r]

Hi,

To center it, you can add the code below in X > Launch > Options > CSS

@media (max-width: 767px) {
.x-logobar {
    clear: both;
}

.masthead {
    background-color: #ffd700;
}
}

Hope that helps.

[s_gogos]

Guys thank you very much for the replies!

Looks like the problem is now solved (added @paul.r 's code ) .

[thai]

You’re welcome

[s_gogos]

Unfortunately the problem is still here
At least on my laptop the logo doesn’t seem center aligned.
In small screens though looks ok.
Something is happening with the top-bar, cause once I deactivate it the logo returns in the right place.
Can anyone please help?

[lely]

Hi There,

The logo is center when I checked on all screen size as I adjust the browser. Can you give us screenshot of the issue?

[s_gogos]

Thank you for the reply!

Here are two screenshots:

1st is from my laptop’s 1366px - 15.6" screen

and the 2nd is how the site looks on an iphone 6 plus

As you can see in the 1st screenshot the logo is a bit on the left while on smaller screens it appears (or at least to my computer and phone) right in the center.

Thank you in advance,
Stergios

PS This issue started when I added the top-bar (with the Polylang’s language switcher). I did that by adding some code to my child theme (I added it in wp-content --> themes --> x-child --> framework --> views --> global --> _topbar.php).

The _topbar.php has this:

<?php // ============================================================================= // VIEWS/GLOBAL/_TOPBAR.PHP // ----------------------------------------------------------------------------- // Includes topbar output. // ============================================================================= ?> <?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>

<?php echo x_get_option( 'x_topbar_content' ); ?>

<?php endif; ?> <?php x_social_global(); ?>

  <ul class="language-switcher right">
  	<?php pll_the_languages( array( 'show_flags' => 1,'show_names' => 0 ) );?>
  </ul>

</div>

<?php endif; ?>

[ruenel]

Hello There,

Thanks for updating in! This issue have occurred because of the language switcher. The next element should been cleared from any floats to avoid any conflicts. To resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

body .x-logobar .x-container.max {
    clear: both;
}

Hope this helps. Please let us know how it goes.

[s_gogos]

Thanks for the reply!
No, unfortunately the code doesn’t work.
It didn’t fix the problem

[nabeel]

Hi again,

Please add the following code in your Customizer:

.masthead-stacked .x-brand {
    width: 100% !important;
    float: left !important;
    display: block !important;
}

Let us know how this goes!

[s_gogos]

@s_gogos

No, unfortunately the code doesn’t work.
It didn’t fix the problem

No, unfortunately this code doesn’t work too…

[nabeel]

Hi again,

I just tried both codes provided previously using developer tools and both are working fine. It looks like there is a CSS syntax error in your Customizer (may be a missing curly bracket) which is preventing the CSS to work on your site. Please look for anything unusual in your Customizer, or if you’re using any cache plugin or Cloudflare, please make sure to purge the cache entirely. In the mean time add the previous code in your Child Theme’s style.css file.

This should work. Let us know how this goes!

[s_gogos]

It works, you are absolutely right!

I added the last code you gave me in the Child Theme’s style.css file, then cleared the cache entirely (both the plugin I have + Cloudflare) and worked like a charm.

Thanks a lot for the amazing support!

[nabeel]

Glad we could help.

Cheers!