Tags cloud in main menu

Support
#1

Hello, X-Masters.

I building my own blog and I would like to show post tags in main menu area.

I use Integrity and left side header.

Please, give me an advice - how I could do it? How I can to move the tag cloud to main menu?

Thank you :blush:

#2

Hello @IvchenkoDV,

Thanks for asking. :slight_smile:

Displaying tag cloud in navbar is something requires custom development, which falls outside the scope of the support we offer. However I can definitely point you in right direction to help you achieve that.

Because this requires custom development, I suggest you to setup and install custom theme. I am sharing few resources that you can use to download and refer on setting up child theme.

https://theme.co/apex/child-themes

Next, please download Tag Cloud Shortcode from WordPress plugin repository. Basically this plugin will give us shortcode to display Tag cloud.

After that you need to copy _nav-primary.php from /wp-content/themes/x/framework/legacy/cranium/headers/views/global/ and paste under /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/. You may need to create necessary child folders.

Please open the file that you have pasted in child theme and then need to use following code and paste after line number 19 that starts with <?php x_output_primary_navigation(); ?> to display tag cloud:

<?php echo do_shortcode('[tagcloud]'); ?>

Please note that the steps I have mentioned is to help you get started. Beyond this it won’t be possible for us to provide further guidance as that will fall outside the scope of the support. If you are not comfortable with programming I suggest you to seek professional help.

Thanks.

#4

Thank you.

I did it and now I can see my tags in main menu.

Next I would like to give it nice style (like Integrity tags).

Can you give me an advice, please?

#5

Hi,

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.

#6

Of course I will fully transparent for your help.

Let me explain my idea. By first I want to apologize for my English and for a lot of words in this topic.

This is link to my site.

Please, look at my blog.
It has simple design (really I just can not create more difficult design :slight_smile: ).
I want to let my users use navigate by tags.
Right side header has tags now: 1. as menu ellement; 2. as a widget.

You supported me and I moved tags to main menu section. Thank you!

Now I need some CSS (I think…) :slight_smile:
I like design of tags under posts (Integrity stack). I like how it looking in tags widget.

And I would like create similar design for my tags in main menu (look at added screens).

What I can do for it?

Thank you :slight_smile:

#7

Hello @IvchenkoDV,

If you want to style menu items as tags under posts, please add following CSS under X > Launch > Options > CSS:

.x-navbar .desktop .x-nav > li > a{width: 80%; margin: 0.65em auto; border: 1px solid rgba(0,0,0,0.125); padding: 0.692em 1.154em 0.769em; cursor: pointer; font-size: 13px; line-height: 1.3; text-align: center; text-transform: uppercase; vertical-align: middle; color: #c5c5c5; color: rgba(0,0,0,0.375); background-color: transparent; border-radius: 0.35em; box-shadow: inset 0 0 0 transparent, 0 1px 1px rgba(255,255,255,0.95); -webkit-transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease; transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease; }

If you want to style tag items present under Menu bar, please use following CSS:

a.tag-cloud-link {margin: 0.615em 0.615em 0 0; border: 1px solid rgba(0,0,0,0.125); padding: 0.692em 1.154em 0.769em; cursor: pointer; font-size: 13px; line-height: 1.3; text-align: center; text-transform: uppercase; vertical-align: middle; color: #c5c5c5; color: rgba(0,0,0,0.375); background-color: transparent; border-radius: 0.35em; box-shadow: inset 0 0 0 transparent, 0 1px 1px rgba(255,255,255,0.95); -webkit-transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease; transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;}

a.tag-cloud-link:hover {color: #777; color: rgba(0,0,0,0.75); border-color: #cfcfcf; border-color: rgba(0,0,0,0.25); background-color: #fff; background-color: #fff;}

So the final output would look something like https://screencast.com/t/rNvJwE53Q1N

Thanks.

#8

Thank you very much for your job!

I’m very glad to see the result!

I had choose to manual add my tags to main menu (without cloud).

Thank you once again!

Could you please help me again? :slight_smile:

  1. I would like to change background of menu element (to #ffffff) when it hover position (like tags under posts).
  2. I would like to delete additional sign for menu element (look to my screen).

Excuse me for requested your help a lot of times!

#9

Hi,

To achieve that, you can add the code below in Custom CSS

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
    background: #fff;
}

Hope that helps.

#10

Thank you!

You helped me!

:slight_smile:

#11

You’re welcome! :slight_smile:

#12

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