Various Nav bar Colors

Support
#1

Hi,
I would like make by nav bar different colors on certain pages. What do you recommend is the best way to achieve that look?

#2

Hello @quituck,

Thanks for writing in!

You can use page id feature and the navigation class name to style the nav bar separately on each pages. Here’s a sample CSS that you can take a look.

.page-id-3239 .x-navbar {
    background-color: #ededed;
}

In above code, you need to replace 3239 as that’s the page id. To find out page id, please take a look at following resource:

Thanks.

#3

Hi,
Thank you. I have another question. If use the cornerstone navigation inline element how can I get it to switch to the hamburger style / stacked menu on mobile because it stays full width on all screens.

#4

Hi @quituck

I had the same question by the past and with a little search on Google :smiling_imp: i found this solution :

Have a good day :wink:

#5

Thank you for your contribution @Jaadra

@quituck … We also have a detailed guide on hide during breakpoints feature in our knowledge base section here (https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378) which should help you to implement different elements on different devices or screen widths.

Hope that helps.

1 Like
#6

Problem solved. Thank you!

#7

You are most welcome. :slight_smile:

#8

If I wanted to change the logos per page in my nav bar what do you recommend is the best way for me to do this?

#9

Hello @quituck,

For this kind of change, I will recommend you to upgrade to the pro version and will have access to a lot more customization for your header.

For Cornerstone, you will need to add some custom CSS on the page you need another logo. Here is a great starting point example to do that.

.x-brand {
    background: url('image.jpg') center center no-repeat;
    background-size: 100%;
}
#10

I will consider upgrading at a later time.

The css worked, the only problem using the above CSS is now I have two logos images in the nav bar.

How to I hide the default logo?

Thank you!

#11

Hi @quituck ,

Try also adding this on Cornerstone page CSS:

.x-brand img {
    opacity: 0;
}

If you still have issues regarding this, please share exact URL so we can check properly. Thank you.

#12

That Worked Perfectly. Thanks!

#13

You’re always welcome!

Cheers.

#14

My next questions is how to I set up a global block for my topbar. I’m currently using the Renew stack.

In my child theme I followed this path >>> (x-child/framework/views/global/_topbar.php) to set up the global block using the following code:

    <?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container">
   		 <?php echo do_shortcode( '[cs_gb id=223]' ); ?>
    </div>
  </div>

<?php endif; ?>

That did not work. Do you know what I did wrong? Do I not have the topbar.php file in the right location?

#15

Hi @quituck,

That’s from old theme, the new file path should be /x-child/framework/legacy/cranium/headers/views/global/_topbar.php. Then make sure the child theme is active.

Thanks!

#16

Perfect! Thanks Again!

#17

You’re welcome, @quituck.

#18

My shop page using my renew stack says “false”. How can I change the title? I don’t see any options to change the woocommerce shop page title in my customize settings.

#19

Hello @quituck,

Thanks for updating the thread. :slight_smile:

You can change the Shop page title from X > Theme Options > Renew > Shop Options > Shop Title.

Thanks.

#20

Perfect Thank you.