Docs

[Lutslana]

Dear Sir or Madame,

please help me to do the make the changes as shown in the screenshot.

(Please find the screenshot in the next post below.)

1. Size down the hight of the topbar.
2. Move the language changer to the right.

Here the _topbar.php:

	<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <div class="wpml-selector"><?php do_action('icl_language_selector'); ?></div>
    </div>
  </div>

<?php endif; ?>

Here the style.css:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.x-navbar .navbar-text {
    font-family: 'Roboto Slab', serif;
    float: left;
    margin: 10px;
    size: 17px;
    
}

Kind regards!

[Lutslana]

This reply has been marked as private.

[Paul R]

Hi,

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

body .x-topbar .wpml-selector {
   float:right;
   margin-top:13px;
}

body .x-topbar {
  min-height:39px;
}

Hope that helps.

[Lutslana]

Thank you Paul!

I have integratet the css code but the resizing of the top-bar seems not to work. I think it is also necessary to move up the text a little bit.

Ms css now:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.x-navbar .navbar-text {
    font-family: 'Roboto Slab', serif;
    float: left;
    margin: 10px;
    size: 17px;
    
}

.x-topbar .x-social-global {
    display: none !important;
}

body .x-topbar .wpml-selector {
   float:right;
   margin-top:3px;
}

body .x-topbar {
  min-height:13px;
}

[Christopher]

Hi there,

Please add this :

.wpml-selector {
    height: 30px;
}
.x-topbar .p-info {
    margin: 11px 0 0;
}

Hope it helps.

[Lutslana]

Dear Christopher,

I have added that. Thank you, that helped!
The height of the wpml-selector does not work. Any idea?

My css now is:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.x-navbar .navbar-text {
    font-family: 'Roboto Slab', serif;
    float: left;
    margin: 10px;
    size: 17px;
    
}

.x-topbar .x-social-global {
    display: none !important;
}

body .x-topbar .wpml-selector {
   float:right;
   margin-top:3px;
}

body .x-topbar {
  min-height:13px;
}

.wpml-selector {
    height: 30px;
}
.x-topbar .p-info {
    margin: 11px 0 0;
}

[Friech]

Hi There,

The wpml selector is already on the right side. We are not entirely certain about the height issue, please clarify.

Thanks.

[Lutslana]

Thank you so far, I decided to remove the switcher from the topbar 😉

[Paul R]

You’re welcome! 🙂

[Author]

Posts