Docs

[powrider686]

Hello,
I’m working on a site, http://earthrise50.oceanplanet.wpengine.com/, and I’d like to add an image / logo to the bottom area on the right side menu bar, beneath the menu.

User: demo
Pass: earthrise

How might I be able to do that and how would I control the vertical and horizontal alignment within the menubar area?

Thanks for the help!

Marcus

[Friech]

Hi Marcus,

Thanks for writing in! To move the logo underneath the menu items, you can add this under Custom > JavaScript in the Customizer.

(function($) {
   $(".x-brand").insertAfter(".x-nav-wrap.desktop");
})(jQuery);

Not sure what do you mean vertical and horizontal alignment. But you can adjust the margins to position the menu on the navigation bar.

.x-nav-wrap.desktop #menu-home-page-menu {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0;
}

Hope it helps, Cheers!

[powrider686]

Hey Friech,
That does help, but instead of moving the top logo down, can I add another image? It’s different than the main logo, and I’d like to have the main site logo up top and a secondary image on the sidebar.

Would it be possible to have buttons in the sidebar as well?

Thanks for the help!

[Paul R]

Hi,

Yes, that’s possible.

Create file _nav-primary.php in wp-content/themes/x-child/framework/views/global
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

<?php endif; ?>

<img src="//earthrise50.oceanplanet.wpengine.com/wp-content/uploads/sites/5/2016/11/Bioworld-EarthUniteGraphic560.png" alt="Just another Earthunite.Space site">
<?php echo do_shortcode('[button type="real" shape="square" size="regular" href="#example" title="Example"][icon type="ticket"]Square Button[/button]');?>

Change the src with the url of your image.

Hope that helps.

[powrider686]

Ok that worked pretty much but needs some tweaking that I can’t figure out. So I’d like the image that I uploaded to be a hyperlink to this url – http://aspenpsych.oceanplanet.wpengine.com/ and I’d like to get it centered. Tried playing around a bit but I ended up changing the footer and it didn’t work out 🙁

Also I need to to be centered, both horizontally and vertically. How might I achieve that?

Thanks for the help!

Marcus

[Nico]

Hi There,

Enclosed the image link above with a tag.

From this:

<img src="//earthrise50.oceanplanet.wpengine.com/wp-content/uploads/sites/5/2016/11/Bioworld-EarthUniteGraphic560.png" alt="Just another Earthunite.Space site">

To this:

<a href=" http://aspenpsych.oceanplanet.wpengine.com/"><img src="//earthrise50.oceanplanet.wpengine.com/wp-content/uploads/sites/5/2016/11/Bioworld-EarthUniteGraphic560.png" alt="Just another Earthunite.Space site"></a>

To make it center:

<a href=" http://aspenpsych.oceanplanet.wpengine.com/"><img src="//earthrise50.oceanplanet.wpengine.com/wp-content/uploads/sites/5/2016/11/Bioworld-EarthUniteGraphic560.png" alt="Just another Earthunite.Space site" style="margin: 0 auto;display: block;"></a>

I added this code below to the image:

style=" margin: 0 auto;display: block;"

Hope it helps.

Let us know how it goes.

Thanks.

[powrider686]

Yea that did the trick, mostly. I’ve been playing around with it but I cant get the image to center automatically. For example on my laptop it is centered just fine in the bottom of the menu vertically and horizontally. But when viewed on a widescreen desktop, it’s it is stuck to the bottom of the menu, leaving lots of black space. How can I get it to align in the middle on any screen size?

Also, can you check out the font for me in the menu and verify that you are seeing the BauhausStdDemi font? I see it on most browsers, but I’m not seeing it in Chrome and I can’t figure out if it is me or chrome.

Thanks for the help!

[Paul R]

Hi,

1. Regretfully 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.

2. Font is not BauhausStdDemi, kindly refer to the link below for your guide on how to add custom font.

https://community.theme.co/forums/topic/how-do-i-change-font-in-theme-x/#post-248442

Hope that helps.

[Author]

Posts