Docs

[clmurray1969]

Sorry to have repeated this question…but ive tried a couple of things, and it doesnt seem to be working. Im using the renew stack…customer wants the logo in the center, so i put it to stacked…and they want an account login and some lines of text lined up on the right of the logo, pushed to the edge of the header. Im using a child theme. Here is the site…just starting out…www.southjerseypaper.net

Im attaching a jpg of what i want to add into the header…text links…maybe a phone number line of text under the links…which i didnt add in the example. And a search box.

[Friech]

Hi There,

Thanks for writing in! I did checked the site, and you already got the text there. You only need to wrap it on an anchor tag <a href=""> so it would become a link.

And do not use the class x-container-fluid anymore that is for old version of X, use x-container instead.

Cheers!

[clmurray1969]

Thanks Friech for looking…yea…i kinda got it to work for me…i just using text for the place holder, i figured i would make them links after i get it where i want it.

Question…how do i make it responsive? When i look at it on a phone…the text just runs to the middle and you cant read it…and when its links it will be hard to see. What is the trick there? Thanks!

[Christopher]

Hi there,

Please update this code :

.x-logobar > span {
    position: relative;
    top: -60px;
    display: block;
    text-align: right;
    right: 160px;
}

to :

@media (min-width:979px){
.x-logobar > span {
    position: relative;
    top: -60px;
    display: block;
    text-align: right;
    right: 160px;
}
}

Hope it helps.

[clmurray1969]

You guys have been great. I have a bit of a snafu. Customer wants to change the logo from center to left…add some text centered up next to logo…then have the navigation and text to the right. I have cleared out and restarted but i keep sending the logo out to far to the left. So i have put the original navbar file unaltered in my child theme. Im attaching a pic of what the customer is wanting. I really appreciate all the help.

[clmurray1969]

Here is site as is now…Thanks again!

[clmurray1969]

http://www.southjerseypaper.net

[clmurray1969]

nevermind about the text next to image…i added to the image itself…that will work fine.

[Jade]

Glad to hear you got it sorted.

Cheers!

[clmurray1969]

Im trying to add the links and text to the right. But i think im using an older code in my earlier attempts. Could you point me in the right direction?

[Nabeel A]

Hi again,

Can you please share the code with us so we can suggest you the changes.

Thanks!

[clmurray1969]

Here is the nav file…i am not very good with this yet…so the text is there..but its messed up…and its not lined up on the bottom.

<?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">
      <div class="x-column x-1-2 x-sm"> <?php x_get_view( 'global', '_brand' ); ?></div>
      <div class="x-column x-1-2 x-sm"><a href="http://@">Home</a><a href="http://@"></a> |  <a href="http://@">Blog</a> | <a href="http://@">Register Today</a> | <a href="http://@">Account Login</a><br><a>We Personally Answer Every Call 800-232-6927</a></div>
      </div>
    </div> <!-- end .x-logobar-inner -->
  </div> <!-- end .x-logobar -->

  <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> <!-- end .x-navbar-inner -->
    </div> <!-- end .x-navbar -->
  </div> <!-- end .x-navbar-wrap -->

<?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> <!-- end .x-navbar-inner -->
    </div> <!-- end .x-navbar -->
  </div> <!-- end .x-navbar-wrap -->

<?php endif; ?>

[clmurray1969]

Ok…so i got the logo left and i have the text in the header. Now i need the text to align right while logo aligns left.

[clmurray1969]

Ok…im a little closer now…http://southjerseypaper.net/
Now i just need the logo and the text inline with each other…here is my updated 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' ); ?>
        <div align="right"><div class=".x-headtext"><a class="logobar-link" a href="http://@">Home</a><a href="http://@"></a> |  <a href="http://@">Blog</a> | <a href="http://@">Register Today</a> | <a href="http://@">Account Login</a><br><a class=".x-headtext" href="a href="tel:+1-800-555-5555" target="_top">We Personally Answer Every Call 800-232-6927</a></div>
      </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; ?>

[clmurray1969]

here is my css…probably not the most efficient..

.x-navbar{
 background: linear-gradient(to bottom, #0E2F84 0%, #051B5A 100%) repeat scroll 0% 0% transparent;
}
.x-logobar {text-align: left; background: linear-gradient(to bottom, #B10012 20%, #B10012 100%) repeat scroll 0% 0% transparent;

[Author]

Posts