Docs

[keith s]

How can I make the logo show up beneath the menu? I did this with some CSS changes that does not allow the logobar to display and then inserted the logo in a section beneath the menu. Worked great…until I started looking at events and posts. neither have a logo displaying and I cannot figure out how to make it work. Do I modify the stack/view by moving it into the framework directory in the child theme? Please advise. Thank you.

News item created from post – http://edgertonksdev.org/edgerton-news-headline-four/

Sub page – http://edgertonksdev.org/about/

Home page – http://edgertonksdev.org/

[Rue Nel]

Hello There,

Thanks for writing in! The best way you can add the logo beneath your menu the same as the pages you have set up in your blog posts and archive pages, 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

function add_logo_section(){ ?>

<?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>

        <?php if (is_single() || is_archive() ) : ?>

        <!-- ------------------------------  -->
        <!-- Custom Logo Section starts here -->
        <!-- ------------------------------  -->

        <div id="x-section-1" class="x-section" style="margin: 0px;padding: 0px; background-color: transparent;">
			<div class="x-container" style="margin: 0px auto;padding: 20px 50px 20px;">
				<div class="x-column x-sm x-2-3" style="padding: 0px;">
					<a class="x-img x-img-link x-img-none" style="float:left;" href="http://edgertonksdev.org" title="City of Edgerton, Kansas " data-options="thumbnail: 'http://edgertonksdev.org/wp-content/uploads/city-of-edgerton-kansas-logo-subpg.png'"><img src="http://edgertonksdev.org/wp-content/uploads/city-of-edgerton-kansas-logo-subpg.png" alt="City of Edgerton, Kansas "></a>
				</div>

				<div class="x-column x-sm x-1-3" style="padding: 0px;">
					<div class="x-widget-area" style="padding-top:10px;">
						<div id="search-3" class="widget widget_search">
							<form method="get" id="searchform" class="form-search" action="http://edgertonksdev.org/">
							  <label for="s" class="visually-hidden">Search</label>
							  <input type="text" id="s" class="search-query" name="s" placeholder="Search">
							</form>
						</div>
					</div>
					<div class="x-text" style="padding-top:10px;">
						<p style="text-align: center;">OFFICIAL SITE OF EDGERTON, KS</p>
					</div>
				</div>
			</div>
		</div>
		<!-- ----------------------------- -->
		<!-- Custom Logo Section ends here -->
		<!-- ----------------------------- -->

		<?php endif; ?>

      </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; ?>

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

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

[keith s]

It worked beautifully! Thank you very much!

[Rahul]

Glad to hear it!

Let us know if we can help with anything else.

Thanks for choosing the X-theme.

[keith s]

This reply has been marked as private.

[Christopher]

Hi there,

Currently you’ve added logo and search form using CS that’s why it displays inside content area. Please implement the code we provided earlier in this thread and let us know how it goes.

Thanks.

[keith s]

No, we used it in the global file in the View directory located in the Child theme. It creates the header and nav automatically. But this only works on the Fullwidth template. Am I missing something? Please advise. Thank you.

[keith s]

I am putting the “under development” page back up. Please login to view the site. Thank you again for your assistance.

[keith s]

I apologize. You are correct. I am lost due to the numerous revisions. I guess my question would now be – How can I make the code above work for pages as well as posts? Wow, that seems a lot easier than all the explanation above. 🙂

Thank you for your patience.

[Friech]

Hi There,

To display the custom header on all pages and posts, from the code above please remove the line:

<?php if (is_single() || is_archive() ) : ?>

And its corresponding:

<?php endif; ?>

Cheers!

[keith s]

You are the best! Thank you!

[Joao]

Glad to hear we managed to help,

Joao

[keith s]

I’m back! I have one more questions.

1) Is there anyway to add a section underneath the logo/search section but before the Default layout template? I would like to add the section for an image I can replace based on the page content.

2) How can I make the second logo/search combination display on the homepage only? http://edgertonksdev.org/ *You will notice the second set has a logo and search field containing white accompanying text.

Thank you again for your assistance.

[Rad]

Hi there,

1. You mean in the landmark section? It’s possible, but with custom development. Example, you’ll have to create custom group fields and custom fields using ACF Pro, this will create UI for you and your users so you can just add content or image based on page. Then you can simply edit the landmark template to include ACF field ( get_field() )

This way, you don’t need to create each coding on each page, you’ll just have to change the value of the options created by ACF Pro.

Example, Assuming you created a field page_image assigned to your page

<img src="<?php echo get_field('page_image'); ?>">
<?php if (is_single() || is_archive() ) : ?>

2. Please add this CSS,

.home #x-section-1 {
display: none;
}

Hope this helps.

[keith s]

Step #2 – new CSS worked awesome. Thank you!

Step #1 – I have installed and activated AFC Pro. Can you please give me the steps to completing this process?

Do I create a version of the stack file and edit the landmark section in that and upload it to the stack folder in my child theme?

What are Field Groups? Do I need one for the ‘page_image’ call?

Still confused but getting very close. Thank you in advance for your assistance.

[Author]

Posts