Ethos Theme - Navigation Bar Queries

I am currently using the Ethos theme, and wish my logo to be at the top of the page (centred) with the navigation bar below the logo, and the carousel underneath the navigation bar (inline).

I would also like the whole background of the page to be White.

Many thanks
David

Hi David,

Thanks for reaching out.

That would require template customization, please check this thread and it should give you the initial idea.

But in your case, you’ll be working on the file framework/legacy/cranium/headers/views/ethos/wp-header.php

Then edit that file and move the line <?php x_get_view( 'ethos', '_post', 'carousel' ); ?> below <?php x_get_view( 'global', '_navbar' ); ?>.

Example,

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

As for making the logo on centered top above the navigation, please go to Theme Options > Header > LOGO AND NAVIGATION > LAYOUT and change it to Stacked instead of Inline.

Then in Theme Options > Layout and Design > BACKGROUND OPTIONS, please change your background to white.

Hope this helps.

Excellent thanks. Phew worked. How do I change the background colour of the navigation bar to White?

Thanks for your help.

David

Hi David,

Please add this code in X > Theme Options > CSS:

.x-navbar-wrap .x-navbar {
  background-color: #fff;
  border: 0;
}

Here are some related links for further reading:

Hope this helps.

1 Like

Many thanks that all worked.

I am sure I will have some other questions. But for now many thanks for your help.

David

You are most welcome, David. :slight_smile:

Prasant. After testing it appears that the change only applies to category pages and not the main index page. How do we apply to the main index page.

Thanks
David

This relates to the customisation of the main theme via wp-header.php

Thanks
David

Hey David,

Did you mean the customization that’s for moving the carousel below the navbar? I tested the above code in my local setup and it works on main index page as well. It’s a global change so it should reflect on every page. However you can try replacing the previous code with the following:

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
	<?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

Let us know how this goes!

Thanks. Can you confirm the location of this file?

David

Also, when I place my logo stacked on the Navigation bar it moves above but with a blue background and not white like the the nav bar background. How do I change the background of this area?

Thanks
David

There does appear to be some latency with updates to the site. From admin console I have changed the navigation bar background to white, and moved the navigation bar to stacked. This is showing in the Preview within the same browser and session but not updating via other browsers.

Apologies for all the questions. How do you hide the post carousel from blog post pages but retain on the front page?

Thanks
David

Hi David,

To hide it in your blog post pages, you can add the code below in Theme Options > CSS

.single-post .x-post-carousel {
    display:none;
}

Hope that helps

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.