Docs

[usmeagle00]

I have two images that I added to my logo bar using the background-image property. standrews.ms

div.x-logobar-inner > div.x-container.max.width{
	background-image: url(my link), url(my link);
  background-repeat: no-repeat;
    background-position: 100% 1%, 90% 1%;
}

I would like to make these two links clickable, can you assist me?

[Jade]

Hi there,

Having the two images added a background can’t be link to somewhere. What you can do is to add the two images in the page through a child theme. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once the theme is installed and activated, login through FTP and go to /wp-content/themes/x/framework/views/global/ and copy the file _navbar.php and place it in /wp-content/themes/x-child/framework/views/global/. Open the file and replace the code with this:

<?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 id="logos">
            <a href="#"><img src="http://standrews.ms/wp-content/uploads/2016/10/DioceseMS.png" /></a>
            <a href="#"><img src="http://standrews.ms/wp-content/uploads/2016/10/episcopalShield.png" /></a>
        </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; ?>

Then add this code in the custom CSS:

#logos  {
    float: right;
    min-width: 150px;
    text-align: right;
}

Hope this helps.

[usmeagle00]

Hi, I finally got this in the child theme. It put the links in but it also shows both links “www” address.

standrews.ms

/* EDIT TO ORGINAL POST */

I put the information in wrong, its fixed now and this worked! Thanks so much!

[Rahul]

Glad you’ve sorted it out for yourself.

Let us know if we can help with anything else.

Thanks for using the X!

[Author]

Posts