Docs

[Brent-St]

Hi,

My client wants to have a ‘Book Now” button inline and the rest of the menu stacked.

Is this possible?

Thanks,

Brent

[Rupok]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Brent-St]

This reply has been marked as private.

[Jade]

Hi Brent,

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 you got the child theme active, login through FTP and go to wp-content/themes/x-child/framework/views/global/ then create a file in the directory named _navbar.php. Open the file and add this code:

<?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' ); ?>
        
        <a id="book-now" href="#">
            Book Now
        </a>
      </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; ?>

Please make sure that the header setting in the customizer is set to Stacked. Then add this code in the custom CSS:

.masthead-stacked .x-brand {
    float: left;
}

#book-now {
    display: block;
    float: right;

    transition: color 0.4s ease 0s;
    color: #900601;
    width: 80px;
    height: 80px;
    padding-top: 20px;
    display: inline-block;
    margin: calc(-1 * 1px) 1px 0;
    position: relative;
    white-space: nowrap;

    background-color: rgba(255, 255, 255, 1);
    transition: border 0.4s ease 0s, background-color 0.4s ease 0s;
    border: solid rgba(144, 6, 1, 1) 1px;
    border-radius: 50%;   
}

Hope this helps.

[Brent-St]

Hi Jade,

thanks very much.

That seems to work though there are a couple of things i need to fix.

1. How to i add a link to the “Book Now”?

2. Is it possible to centre the text vertically within the circle?

Thanks again for the great info!!

Brent

[Joao]

Hi Brent

1-

Please check the code provided above and find this part:

<a id="book-now" href="#">

Substitute the # for: http://yourlink.com

If the link is in your website you can substitute by /yourpage

2-

Find this line of the CSS above provided:

padding-top: 20px;

and change the value to 28px;

Hope it helps

Joao

[Author]

Posts