Docs

[AdamWester]

Hello I need to reposition the button currently in the top bar TO just above the main nav in the whitespace and inline with the logo vertically as shown in attached image.

Also is it possible to have a background color that is just behind the menu text as shown in the second attachment (outlined in red stroke) that doesn’t fill the entire block. I know I can change the navbar background color but I only need the gray to extend behind the menu options and line up with the gray in the logo image not the entire header space.

Thanks in advance for your help.

[AdamWester]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?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">
      <a class="x-btn x-btn-square x-btn-large" style="color:#ffffff; " href="http://www.golfincmagazine.com/strategy-summit/rates-register/" title="Example" data-options="thumbnail: ''">REGISTER TODAY</a>
        <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; ?>

#2 No, it’s not possible, you can add a top border to navbar.

Please add following code in Customize -> Custom -> CSS :

.x-navbar {
    border: 1px solid red;
}

Hope that helps.

[AdamWester]

Thanks for the help but this doesn’t achieve what I showed in the image #1 for the button placement. the code you sent placed the button directly above the Logo and added 100’s of px of white space in the header. I was able to move the “Register” button to the main block and float it right by placing it in the main div like the code example below, but this creates the same issues as your original code with too much additional white space especially when you add margin-top to bring it down and align with logo.

<?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">
<a class="x-btn x-btn-square x-btn-large" style="color:#ffffff;float:right;" href="http://www.golfincmagazine.com/strategy-summit/rates-register/" title="Example" data-options="thumbnail: ''">REGISTER TODAY</a>
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Please see my original image example of where I need to button to be (attached here again for your reference). Also once there how can I hide it on mobile views so it doesn’t screw up the responsive layout on smaller devices. Thanks!

[AdamWester]

See additional image that shows the navigation too low now pushed below logo. This is of course being caused by the button since its n the same div. Thanks!

[Paul R]

Hi,

You can adjust the alignment in Appearance > Customize > Header > NAVBAR > Navbar Top Height
and Appearance > Customize > Header > LINKS – ALIGNMENT > Navbar Top Height > Navbar Top Link Alignment (px)

http://screencast.com/t/IXF806Wy1JfV

Hope that helps.

[AdamWester]

Yes but that leaves a huge white space below the logo which of course I don’t want. Can you help make it layout exactly like the first image I attached called headerquestion.jpg? Thanks.

[Nabeel A]

Hi there,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.masthead-inline .desktop .x-nav {
    margin-top: 50px !important;
}
.x-navbar .x-btn {
    position: absolute !important;
    right: 0 !important;
    top: 110px !important;
    z-index: 999 !important;
}

Let us know how this goes!

[AdamWester]

Hello that does move the button to where I need it thanks. Now the issue is when viewing on responsive it shows on top of the logo. Is there a way to hide it on mobile and tablet?

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:767px) {
    .x-navbar .x-btn {
        display:none;
    }
}

Hope this helps – thanks!

[Author]

Posts