Add images to side bar in Integrity

Hi there,

My client wants a couple of association logos put in the sidebar below the main nav menu options on his site: https://photorganised.com. Is that possible?

Thanks for your help.
Cheers!
Matt

Hi Matt,

Thanks for writing in! You’re referring to main navigation. So if you need to add content there, you will need to customize your navigation bar.

First make sure that you have an active child theme (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57). Then copy the file _navbar.php located under (x/framework/legacy/cranium/headers/views/global/) into your child theme’s respective location.

Then locate the following code fragment in your file and then you can place your HTML by replacing the following HTML comment that I have added <!-- Add Your HTML Here -->

<?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' ); ?>
          <!-- Add Your HTML Here -->
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Hope that helps.

Briliant, thanks very much for that.

So I’ve got the two logos to display, but can you help me center the images now please? I’ve added to the code but it’s not centering underneath the main Photorganised logo at the top of the sidebar, they’re slightly to the left (this is on desktop btw, they’re centred on mobile).

This is the code I’ve used so far:

<br />
<div>
<center><img src="https://photorganised.com/wp-content/uploads/2018/05/APDO-Logo-300px.jpg" alt="APDO Logo" width="100" height="122" /></center>
</div>
<br />
<div>
<center><img src="https://photorganised.com/wp-content/uploads/2018/05/APPO-Member-Badge-300px.png" alt="APPO Logo" width="100" height="100" /></center>
</div>

Thanks for your help.
Cheers!
Matt

Hi Matt,

Simply assign the class center-text to your divs. For example:

<div class="center-text">
  <img src="https://photorganised.com/wp-content/uploads/2018/05/APDO-Logo-300px.jpg" alt="APDO Logo" width="100" height="122" />
</div>
<div class="center-text">
  <img src="https://photorganised.com/wp-content/uploads/2018/05/APPO-Member-Badge-300px.png" alt="APDO Logo" width="100" height="122" />
</div>

Hope that helps.

Thanks again, but that didn’t make a difference. I’ve attached a screenshot, they’re still sitting to the left.

Thanks for you continued help.
Cheers!
Matt

Hi Matt,

Please try removing these codes that are in the Global CSS:

.x-navbar-fixed-left .x-brand {
    width: calc(100% + 50px);
}

The remove from padding-right: 50px; from:

.x-navbar.x-navbar-fixed-left {
    padding-right: 50px;
    width: 300px;
}

And update this code:

.x-navbar-fixed-left .desktop .x-nav li.menu-item a span .x-icon {
    position: absolute;
    right: -40px;
    margin-left: 5px;
}

to

.x-navbar-fixed-left .desktop .x-nav li.menu-item a span .x-icon {
    position: absolute;
    right: 0;
    margin-left: 5px;
}

Hope this helps.

Thank you Jade, that’s really awesome.

Just one fix, how can I put a 10px margin to the right of the menu icons (on desktop)?

Thanks again.
Cheers!
Matt

Hi Matt,

You can do that by updating this code:

.x-navbar-fixed-left .desktop .x-nav li.menu-item a span .x-icon {
    position: absolute;
    right: 0;
    margin-left: 5px;
}

to

.x-navbar-fixed-left .desktop .x-nav li.menu-item a span .x-icon {
    position: absolute;
    right: 20px;
    margin-left: 5px;
}

Hope this helps.

You’re a star, thank you so much!
Cheers!
Matt

Hi Matt,
You are welcome :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.