Header & Portfolio Navigation problems

Support
#1

Hi there,
On my site oneworldtrek.wpengine.com, I’ve been working to edit the portfolio page. With your help I’ve gotten it pretty much there but I’m still having a few problems that I can’t figure out.

On portfolio item pages there is a problem, here is an example: http://oneworldtrek.wpengine.com/custom-trekking-trips/everest-base-camp-lodge-trek-nepal

Where the portfolio navigation is and that should be on one line, it is displayed on 4 lines and is unusable. Also, when I change the header to use the one I have created in Pro Headers, the portfolio navigation goes away. How could I add portfolio navigation and bread crumbs into the header via the builder?

Here’s a screenshot too: https://www.dropbox.com/s/kwi61q9kul4xtrg/Portfolio%20navigation%20issue.png?dl=0

Also, how could I center the Hikers Icon and “Contact Us to Request a Detailed Trip Itinerary” above the social. It seems left aligned to me and I’d like to center align it.

Here is what my content-portfolio.php in my child theme currently has:

<?php // ============================================================================= // VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP // ----------------------------------------------------------------------------- // Portfolio post output for Integrity. // ============================================================================= $archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' ); ?> >
<?php x_portfolio_item_featured_content(); ?> 
<?php if ( x_is_portfolio_item() ) : ?>

  <div class="entry-info">
    <header class="entry-header">
      <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
      <?php x_integrity_entry_meta(); ?>
    </header>
    <?php x_get_view( 'global', '_content', 'the-content' ); ?>
  </div>
  <div class="entry-extra">
  <a href="http://oneworldtrek.wpengine.com/contact-us">
<img src="http://oneworldtrek.wpengine.com/wp-content/uploads/2017/08/Mountain-Man_17.08.12-02.png" alt="One World Trekking" height="75" width="75"/>
<span class="text">
    Contact Us To Request<br>
    a Detailed Trip Itinerary
</span>
   </a>
    <?php x_portfolio_item_social(); ?>
 <div class="trip_attributes_header">Trip Overview</div>  
 <div class="trip_attributes_header2">Information</div>  
    <?php the_field('trip_snippets'); ?>
 <div class="trip_attributes_header2">Dates</div> 
    <?php the_field('group_departure_date'); ?>
 <div class="trip_attributes_header2">Price</div> 
    <?php the_field('price'); ?>
 <div class="trip_attributes_header2">Other Featured Trips</div>
  </div>
  </div>

<?php else : ?>

  <header class="entry-header">
    <h2 class="entry-title entry-title-portfolio">
      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
    </h2>
    <?php if ( $archive_share == '1' ) : ?>
      <?php x_portfolio_item_social(); ?>
    <?php endif; ?>
  </header>

<?php endif; ?>

What am I missing??

Thanks for the help!!

Marcus

#2

Hey Marcus,

Thank you for the detailed post information. The breadcrumbs and the nagivation is part of the default header. When you use custom header, the default header will be replaced with the custom one. This is why the breadcrumbs and the navigation will disappear when custom header is active.

To display the extra info like this:

Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-extra a img {
    float: left;
}

.entry-extra a .info {
    float: right;
    max-width: 300px;
}


.entry-extra .x-entry-share {
    clear: both;
    margin-top: 30px !important;
}

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

#3

Hi Rue,
Thanks for the help.

For the first, ok I understand that. I have set the portfolio pages back to the default header with portfolio breadcrumbs, and it’s all wonked out. How can I fix that? Also, when using Pro Header, how could I add breadcrumbs or portfolio navigation areas to the header?

For number 2, that almost worked, but I can’t get the margins and spacing right on the text to the right of the icon. Also, how might I be able to add a 1 px border with the color #064789 with 2 px radius corners around the text, and how can I center that text within the border? Or a button would work too.

Here’s the the content-portfolio.php has:

<?php // ============================================================================= // VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP // ----------------------------------------------------------------------------- // Portfolio post output for Integrity. // ============================================================================= $archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' ); ?> >
<?php x_portfolio_item_featured_content(); ?> 
<?php if ( x_is_portfolio_item() ) : ?>

  <div class="entry-info">
    <header class="trip_header">
      <class="entry-title entry-title-portfolio"><?php the_title(); ?></class>
      <?php x_integrity_entry_meta(); ?>
    </header>
    <?php x_get_view( 'global', '_content', 'the-content' ); ?>
  </div>
  <div class="entry-extra">
  <a href="http://oneworldtrek.wpengine.com/contact-us">
<img src="http://oneworldtrek.wpengine.com/wp-content/uploads/2017/08/Mountain-Man_17.08.12-02.png" alt="One World Trekking" height="75" width="75"/>
<span class="text">
    Contact Us To Request a Detailed Trip Itinerary
</span>
   </a>
    <?php x_portfolio_item_social(); ?>
 <div class="trip_attributes_header">Trip Overview</div>  
 <div class="trip_attributes_header2">Information</div>  
 <div class="trip_attributes_body">
    <?php the_field('trip_snippets'); ?></div>
 <div class="trip_attributes_header2"><?php echo date("Y");?> Dates</div> 
 <div class="trip_attributes_body">
    <?php the_field('group_departure_date'); ?></div>
 <div class="trip_attributes_header2"><?php echo date("Y");?> Price</div> 
    <div class="trip_attributes_body">
        <?php the_field('price'); ?></div>
 <div class="trip_attributes_header2">Other Featured Trips</div>
  </div>
  </div>

<?php else : ?>

  <header class="entry-header">
    <h2 class="entry-title entry-title-portfolio">
      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
    </h2>
    <?php if ( $archive_share == '1' ) : ?>
      <?php x_portfolio_item_social(); ?>
    <?php endif; ?>
  </header>

<?php endif; ?>

Thank you!

#4

Hello There,

Thanks for updating in!

1.) At the moment, there is no breadcrumb or navigation element in the header builder. Our developers is working on v2 elements for the header builder and one of the is the breadcrumb. It will be out soon enough as the beta is on its way in a few days for rigid testing.

2.) Do you want some thing like this?

Please make use of this code:

.entry-extra span.text {
    padding: 4px;
    border: solid 1px #064789;
    display: inline-block;
    max-width: 260px;
    margin-left: 10px;
}

Hope this helps. Kindly let us know.

#5

Hey there,
Ok understood.

Currently I am not using the Header builder and the breadcrumb and navigation are all wonked. Can you help me fix that?

  1. That worked great!

Thank you!

#6

Hi there,

It’s covered by the search icon, please go to X > Launch > Options > Header and turn off Search > NAVBAR SEARCH.

That search option is not applicable for Ubermenu.

Thanks!

#7

Great, that did the trick! Thanks for the helP!

#8

You’re most welcome!