Various Nav bar Colors

Support
#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.

#21

My Next question is how do I change the nav bar links and hover color on each page?

Also, I want to change the mobile button colors on various pages as well.

What is the best way to do that?

#22

Hello @quituck,

Thanks for updating the thread. :slight_smile:

To change the nav bar links and hover color for each page, you will have to use WordPress page id feature. Here’s a sample code.

.page-id-3252 .x-nav-wrap.desktop a span {
    color: #ddd;
}

.page-id-3252 .x-nav-wrap.desktop a span:hover {
    color: #731616;
}

You need to change the page id 3252. To find the page id, please take a look at following resource.

To change mobile button color for each page, please add following CSS under X > Theme Options > CSS:

.page-id-3252 .x-btn-navbar.collapsed {
    background-color: #000;
}

.page-id-3252 .x-btn-navbar.collapsed:hover {
    background-color: #ededed;
}

Please change page id 3252.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#23

Hi, that worked perfectly! Thanks!

My next question is how to I change the color of the line that appears below the current menu item?

I tried using the following css and had no luck.
.page-id-153 .x-navbar .desktop .x-nav > .current-menu-item > a,{
color: #0ca265;
}

#24

Hi @quituck,

Please add this to Theme Options > CSS

header .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 #ffffff;
}

Change the #ffffff with the desired color.

If that did not work, please provide your site URL.

Thanks,

#25

Okay that worked for the page I am on. However, when I hover over the other menu items it’s not my color.

See the image attached for reference. I want the other lines that I hover over to be yellow not blue.

.

I tried using the following code:
header .x-navbar .desktop .x-nav > li.current-menu-item > a > span:hover {
box-shadow: 0 2px 0 0 #ffffff;
}

Also the woocommerce widget I put in the nav bar is giving me trouble it looks different from the setting options I chose for it. Is there a short code for the cart widget?

Please advise.

#26

Hi @quituck,

Please change the above CSS to this

header .x-navbar .desktop .x-nav > li.current-menu-item > a > span, header .x-navbar .desktop .x-nav > li > a:hover > span {
    box-shadow: 0 2px 0 0 #ffffff;
}

And would you mind providing a sample URL where this Woocommerce widget is?

Thanks!

#27

That worked.Thanks!

My cart widget also worked, I just had to clear my cache to see my changes. I would like to have to cart icon in my top bar instead of my nav bar. Do you know the best way I can do that?

#28

Hello @quituck,

Please be informed that the Cart Button is only available on the navigation menu. Regretfully there isn’t a way to transfer the cart icon in your topbar. It can only be doen with custom development which is outside the scope of our support.

Alternatively, you can place a cart icon, yes only the icon and the link with no dropdown or cart information details in the topbar by adding a basic icon and link code in the topbar content. You can use something like this:

<a href="http://example.com/cart/"><i class="x-icon-shopping-cart" data-x-icon-s="&#xf07a;" aria-hidden="true"></i></a>

Hope this helps. Please let us know how it goes.

#29

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