Add infinite jello arrow to topbar content

[duncmoran]

Hi, I would like to add an infinite jello arrow pointing to our number in thre topbar. I know how to add code to the topbar content but am unsure what I need to place there to make this work. How do I achieve this? Thank you

edit: Additionally I would like to make the topbar fixed, like the menu, so it shows when scrolling. Thanks

[jade]

Hey Morelly,

Would you mind providing the code that you are trying for the jello arrow so that we can suggest where you can put it?

As for making the topbar fixed, please add this code in X > Theme Options > CSS:

@media (min-width: 768px) {
    .x-topbar {
        position: fixed;
        width: 100%;
    }

    .x-navbar {
        top: 46px;
    }
}

Hope this helps.

[duncmoran]

Hi, Thanks for getting back to me, and thank you for your fixed topbar solution, it works perfectly.

In relation to the arrow, I’m less concerned about the jello effect than I am about being able to place the arrow pointing to the number. Are you able to provide some guidance on how to achieve the arrow pointing to the number inthe top bar? Thank you

[rad]

Hi @morelly,

I’m not sure what’s a jello arrow and the functionality, would you mind providing a sample? But if it requires complex coding then we can’t really cover it. Unless the code is already existing that can be copied.

Thanks!

[duncmoran]

Do not worry about the jello functionality, please see our above update. We just want to insert an arrow pointing to the number in the topbar. Can you please provide information on how to achieve this i.e How to insert an arrow in the topbar.

Thank you

[paul.r]

Hi @morelly,

I am not exactly sure what kind of arrow you are trying to insert. If you have an image arrow, you can use image html code to insert it to your topbar.

eg.

<img src="http://yoursite.com/wp-content/uploads/arrow.jpg">

Another option is to enable shortcode in your topbar, to achieve this, you can add the code below in yur child theme’s functinos.php file

add_filter('x_option_x_topbar_content', 'top_bar_content_shortcode');
function top_bar_content_shortcode ( $content ) {
return do_shortcode ( $content );
}

You can then insert icon shortcodes in your topbar content.

eg.

[x_icon type="arrow-right"]

http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps

[duncmoran]

I figured it out myself. For anyone looking for a similar solution please do the following:

Step 1: You need to add some code to your functions.php file in your child theme.

• Navigate to functions.php in your child theme > edit the file
• add this code

add_filter(‘x_option_x_topbar_content’, ‘do_shortcode’);

• save and exit

Now you can add shortcodes to your topbar.

Step 2: Add shortcode to your topbar

• In our instance this was the shortcode we wanted (though you can add any from the shortcode reference section on the themeco shortcodes pages

[icon type=“arrow-right” style=“font-size: 20px; color: orange; display:inline-block;vertical-align:center;”]

• to add the jello effect we were referring to we made the following amendment to the code

[icon type=“arrow-right” style=“font-size: 20px; color: orange; display:inline-block;vertical-align:center;” class=“animated infinite jello”]

It now works as expected.

Thank you for your help in solving.

[paul.r]

You’re welcome!