Docs

[Varnsen]

Hey guys, I’m running:
X: 4.6.2
CornerStone: 1.3.3

I’m looking for some help in moving around and adding some content to the header section, with my logo, and moving around a specific tab in the nav bar.

The picture below will hopefully explain my issues better than I can with words, but I’ll try.

I’ve added a button to the nav bar and styled it in the global CSS section after following this tutorial. I’d like to fill up some of the space to the right of my website, and move the button to the right without affecting the menu buttons on the left.
Am I going about this correctly? Adding the button through the WordPress menu item, or would I be better suited editing it somewhere else?

I’d also like to add text above the navbar, in the header/logo section all the way to the right. Just with some contact information – any idea how I could go about doing this?

Thanks guys, hopefully someone can help.

[Rue Nel]

Hello 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.

Thank you.

[Varnsen]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It seems your website is under construction. We asked for the URL because we need to check your current setup. Please take the under maintenance mode off or provide us the credentials in private reply so that we can check and assist you on this.

Thanks

[Varnsen]

This reply has been marked as private.

[Jade]

Hi there,

I tried the details you have provided but it doesn’t seem to work.

Kindly double check.

Thank you!

[Varnsen]

This reply has been marked as private.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

.masthead-stacked .desktop .x-nav {
    position: relative;
    width: 100%;
}

.x-navbar .desktop .x-nav>li#menu-item-172 {
    position: absolute;
    right: 0;
}

.x-navbar .desktop .x-nav>li#menu-item-172 a {
    padding-right: 0;
}

Hope this helps.

[Varnsen]

That is perfect for the nav bar question I had, do you have any idea about how to add content to the right of the header, opposite side of the logo? It’s explain in the picture I attached in the first post.

[Jade]

Hi there,

Apologies for missing that. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then login through FTP and copy the file _brand.php in /wp-content/themes/x/framework/views/global then place it in /wp-content/themes/x-child/framework/views/global. Then edit the file content to:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo '<h1 class="visually-hidden">' . $site_name . '</h1>'; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

<div class="more-content">
    
    <!-- Add your content here -->
    
</div>

Then add this code in the customizer:

.x-logobar-inner .more-content {
    float: left;
}

Hope this helps.

[Author]

Posts