Docs

[zacw02]

Hi there,

I tried looking for a forum similar to this but couldn’t find anything and hopefully I’m not just missing something simple. I’d like to have navigation icons just like the navigation bar in the Ethos 1 nav bar but can’t seem to figure out how to get those. I like the shopping cart icons and the person symbol for my account possibly. Also, would it be possible to put those in the top bar by chance?

Thank you

[Nico]

Hi There,

Thanks for writing in.

Please follow the thread below on how to add icons in menu.

https://community.theme.co/forums/topic/icons-in-the-navigation-menu/

Hope it helps.

Thanks.

[zacw02]

Hi there, I got one icon to work but I cannot get additional ones to work. I have been putting <i class=”x-icon-shopping-cart” data-x-icon=””></i> and I have tried a few different variations but no luck

[Paul R]

Hi,

You can try this code instead.

<i class="x-icon x-icon-shopping-cart" data-x-icon="&#xf07a;" aria-hidden="true"></i>

If that doesn’t help, please provide url so we can take a closer look.

Thanks

[zacw02]

That worked. Thank you so much. I had another question that seems to be different based on different sites in particular but I have the slider for Ethos 1 in my masthead and would like to change the text that appears when you hover over the selection as well as add a link to the shop. I tried adding jQuery to the customizer but I don’t believe I did it correctly. The URL is fbr.florist

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[zacw02]

Hey Christopher. On my website that I am working on, fbr.florist, I have the slides at the top of the home page similar to the ethos 1 demo with the posts slides. Right now I have entered in some code so when I hover over it, no texts pertaining to the posts appear like the date, category, and so on. I’d like to add text there to display “shop now” or something of the sort and have it link to the shopping section of the website. I hope that cleared it up.

I attached a screenshot of what it looks like now which is blank but I would like to change that hover text to shop now and have it link to the shop instead of the post

Thanks,

Zac

[Nico]

Hi There,

I could see that you have used a CSS to remove post carousel details or metadata. You could remove and add shop now label using child theme function.php

To setup child theme, https://community.theme.co/kb/how-to-setup-child-themes/
For guide https://community.theme.co/kb/customization-best-practices/

Add this in your function.php child theme. This will remove the entry cover(date,author and categories) and change it to shop now:

// Entry Cover
// =============================================================================

  
  
  
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </a>
        
        
        
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
               <span class="entry-cover-text">shop now</span>
          </div>
        </a>
      </article>

    <?php }

  }

Hope it helps.

Let us know how it goes.

Thanks.

[zacw02]

Hey Nico,

Unfortunately I didn’t have any luck with that. I removed the CSS I had added earlier but it’s not showing up. I opened it in an incognito window to see if the changes went through as well.

EDIT: My mistake I got it working. To link the shop now text to the shop would I just add the link in between the span tags?

[Paul R]

Yes, you can add a link to it.

eg.

<a href="http://yoursite.com/shop"> <span class="entry-cover-text">shop now</span> </a>

Hope that helps.

[zacw02]

so when I add that to the functions.php file for the child theme it then gets rid of shop now. When I remove the link, it shows shop now but just links to the posts

[zacw02]

This reply has been marked as private.

[Rad]

Hi there,

The whole item is wrapped within the link which is linking to the posts, and you can’t add another link within that link. Else, it will cause layout issue.

Instead of adding a link, let’s do this. Add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery ( function($) {

$('.x-post-carousel-meta .entry-cover-text').on('click', function( e ) {

e.stopPropagation();
e.preventDefault();

window.location = 'http://yoursite.com/shop';

} );

} );

Hope that helps.

[zacw02]

That did the trick! Thank you for explaining that as well it helps me learn more as I go along.

I appreciate you guys!

Zac

[Joao]

Great Zac!

Let us know if you need help with anything else.

Joao

[Author]

Posts