Docs

[radcoverdale]

Hello,

I am trying to add a gradient line below my navbar. I have been able to achieve this by adding a section in Cornerstone with the following css:

.gradient-div {
  background-color: #000;
  background-image:
    linear-gradient(
      to right, 
      #0097db, #16195b, #c21187);
  padding-top: 0px;
  padding-bottom: 0px;
  height: 6px;

BUT I want to add this beneath the navbar on all pages, and as not all pages can be edited in Cornerstone I am trying to add this in the _navbar.php file using the Child theme. I am a total php noob so I know I’m probably just not doing it right, but can you give me any guidance as to what code I should be adding to get this to work?

Many thanks!

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[radcoverdale]

This reply has been marked as private.

[Lely]

Hi There,

To achieve that, please copy _navbar.php from this folder: \wp-content\themes\x\framework\views\global to this folder on your child theme: \wp-content\themes\x-child\framework\views\global. Open the copied file then add the following code at the end:

  <section class="gradient-div">
  </section>

Final code should be like this:

<?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>
      </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; ?>
  <section class="gradient-div">
  </section>

Hope this helps.

[radcoverdale]

This worked a treat – thank you! 🙂

[Joao]

Glad to hear it,

Joao

[Author]

Posts