Docs

[lemag]

Hello,

I am trying to make my header transparent so that the image behind it becomes visible. Please look at the website https://gamerobo.com to see what I am trying to achieve on http://gamerobo.visualpath.net/shop/ Basically I want the background image to be visible on both sides and in the header section of the website.

I have tried using the code below but it just makes the background white.

.x-logobar {
background-color: transparent !important;
}

Also, is it possible to place the social media icons or the shopping cart info on the right side of the header (look at https://gamerobo.com/ to see what I mean)?

Waiting for your reply.

[Rue Nel]

Hello There,

Thanks for writing in! To make your site transparent like in your example site, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site,
.x-logobar {
  background-color: transparent !important;
}

.site .x-header-landmark,
.site > .x-container.max.width {
  background-color: #fff;
}

.site > .x-container.max.width {
  width: 100%;
  margin: 0 auto;
  padding: 2.7em
}

You might need to adjust your navbar height and other elements in the header. You can do that in your customizer, Appearance > Customize > Header.

Hope this helps.

[lemag]

Thank you. It worked almost perfectly except that it makes the section under the menu transparent as well, which I do not want. Is there a way to move the entire content section upwards (the content area) in order to remove that space? http://gamerobo.visualpath.net/shop/

Also, is there a way to center the background image? Now it is aligned to the left but I would prefer having the image centered on all resolutions. At this point it looks ok on 1920×1080 resolution but not on lower ones.

Also, regarding the second question in my previous post about the social media links being placed in the header, is there a way to do this?

Thank you.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
.backstretch img {
    top: 0 !important;
}

Copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
         <div class="logobar-social"><?php x_social_global(); ?></div>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Hope that helps.

[lemag]

Thank you. We’ve managed to add the social media icons to the header but we still have the issue with the background image. I have realized that the theme resizes the background image so that it fits the screen resolution. I would like the image size to be fixed, and the image centered. When the screen resolution is HD the entire image is visible while when the screen resolution is lower the image is partially visible but the image size is not modified. (please look at http://gamerobo.com to see what I mean – when I resize the browser window the image is not resized)

Also, is there a way to move shopping cart and the search buttons on the right side of the menu? At this point the menu is aligned to the left, including the cart and search icons.

Thank you.

[Christopher]

Hi there,

Please remove the image and add following this code :

body.archive.post-type-archive-product{
background-image:url(https://gamerobo.visualpath.net/wp-content/uploads/2016/06/bg-Tom-Clancys-Rainbox-Six-Siege.jpg");
background-size:cover;
background position top center;
}
.masthead-stacked .desktop .x-nav {
    margin: 0;
    display: block;
    width: 100%;
}
li.menu-item.x-menu-item.x-menu-item-search, li.x-menu-item-woocommerce {
    float: right !important;
}

Hope it helps.

[lemag]

Thank you. With your help we have managed to modify it to look like we want.

However, I have one more question. How can I change the tab name on the product page from “Additional Information” to “System Requirements”? http://gamerobo.visualpath.net/product/arma-3/

Thank you.

[Rahul]

Hey There,

I am unable to access your website at this moment. Can you confirm it is up and running?

Thanks

[lemag]

It is working now. It had a minor downtime.

[Rupok]

Hi there,

Thanks for updating. You can add this under Custom > JavaScript in the Customizer.

jQuery(function($) {
    $('.woocommerce-tabs .additional_information_tab a').text("System Requirements");
});

Hope this helps.

Cheers!

[lemag]

Hello,

I am looking to make the left and right side of my background image clickable in order to redirect the visitor to a special offer. My website is http://gamerobo.visualpath.net/

Please take a look at https://www.g2a.com/ to see what I am trying to achieve. Their background image is clickable and points toward an offer they want to promote. Is this possible using X theme?

Thank you.

[Christopher]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts