[jriley6669Participant]

hey,

So i’ve been trying to figure out how to get the mobile menu to have the hamburger menu on the left and the logo centered will a button on the right. ( see attached image for how i need it to look).

Whats the best way to go about this? I’ve tried using the top bar with columns. Any suggestions.

thanks

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[jriley6669Participant]

This reply has been marked as private.

[jriley6669Participant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thank you for the URL, on your child theme navigate to this directory \x-child\framework\views\global\. There create a file named _navbar.php and paste the code below on it.

<?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>
    </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' ); ?>
          <a class="custom-header-link right cs-hide-xl cs-hide-lg" href="URL HERE"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i></a>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

That will place a phone button on your header, replace the “URL HERE” with the actual link.

Then add this on Custom > Global CSS

@media (max-width:  979px) {
	.x-navbar-inner {
	text-align: center;
	}
	.x-brand.img {
		float: none;
	    display: inline-block;
	}
	.x-btn-navbar {
		float: left !important;
	}
	.custom-header-link {
		font-size: 4em;
	}
}

We might need additional custom CSS for this, so let us know how it goes.

Cheers!

[Author]

Posts