Docs

[Prasant Rai]

You are most welcome. 🙂

[giurca86]

Hi Guys,

It appears I have one final problem 🙂

Things are looking great in desktop mode but when I view the website on a mobile device, the logo has some unnecessary left margin. How can I remove this margin in mobile mode, but keep it in desktop mode?

So in mobile mode, I want the logo to be completely left aligned.

Thanks Guys!

Ben

[Friech]

Hi Ben,

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

@media (max-width:  979px) {
	.x-navbar .x-navbar-inner > .x-container.width {
			width: 100%;
			max-width: 100%;
	}
}

Hope it helps, Cheers!

[giurca86]

Hi Friech,

Sorry, that didn’t seem to make any visible changes..

Ben

[Christopher]

Hi there,

Please find this code :

.x-navbar-fixed-left {
    margin-left: 50px;
}

And update it to :

@media (min-width:979px){
.x-navbar-fixed-left {
    margin-left: 50px;
}
}

Hope it helps.

[giurca86]

@ Christopher, Fantastic!

Ben

[Christopher]

Glad we could help you with this Ben.

[giurca86]

Hi Guys,

Thank you so much for all the support you have provided in this thread, you are exemplary.

I have another question. I would like to replicate the address/phone number/email section under the side menu in the image.

How would I go about doing this? (http://www.rcprojects.com.au)

Thanks in advance!

[Rue Nel]

Hello There,

Thanks for the updates!

As for your other request to add an address below the menu, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new 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; ?>

<?php // Add the address/phone number/email here ?>
<div class="custom-address-info mtl">
	<p>16 Adam Street <br>
	   HindMarsh SA 5007<br>
	   Line 1: (123) 45678901 <br>
	   Line 2: (098) 12345678 <br>
	   <a href="mailto: [email protected]">Email Us</a>
	</p>
</div>

3] Save the file named as _nav-primary.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Please keep in mind that the address area will also be displayed on smaller screen.

Hope this helps.

[Author]

Posts