[DiamondAlexanderParticipant]

Hi Themeco! I have a question about adjusting the height/spacing of the topbar in the Renew stack.

I’m working on a site for a client so I can’t give access but it’s a more general style question about the topbar so hopefully it will still work.

I am looking to create something like the attached image from HootSuite. I was thinking I could use the topbar to do it but do you think I just need to add html to the header area? If either with the topbar or adjusting the template file, do you have a code suggestion I could try?

Thank you!
Diamond

[JoaoModerator]

Hi Diamond,

Upon checking Hootsuit you can achieve that by adding two Custom links to your navbar:

Sign up and Login

Once you have done that you need to find out each of these menu ID’s

https://wpsites.net/tools/find-nav-menu-item-i-d/

And than you can add the following code to Appereance Customizer Custom CSS with the colors you would like and the correct ID’s

#menu-item-257 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 22px;
}
#menu-item-257 a span {
    box-shadow: none;
}
#menu-item-257 a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}

Hope it helps

Joao

[DiamondAlexanderParticipant]

Hello,

That does work actually for creating the buttons but I should’ve mentioned I’m trying to add the “Contact Us | Phone number” text right above the navigation menu. That was my fault, sorry for not saying that.

Would I be able to adjust the height of the topbar to fit on top of the navigation menu like that or is there another method?

Thanks,
Diamond

[Rue NelModerator]

Hey Diamond,

Do you want to have something like this?
http://prntscr.com/eqlszn

Since you have your child theme active and ready, 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/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>

      <div class="contact right mas">
      	<small><span>Contact Us</span> | <span>+1 234567890</span></small>
      </div>

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

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

Before the code will take effect, you must do the following:
#1] Please turn “On” the topbar in Appearance > Customize > Header > Miscellaneous
#2] Clear off any topbar content if you do not want any.
#3] Go to Appearance > Customize > Social and remove your social networking profile links if you do not want to see any icons.
#4] Please do not forget to set the background color and text color for the topbar in Appearance > Customize > Renew

We would loved to know if this has work for you. Thank you.

[Author]

Posts