Docs

[jkonnikova]

Hello X Team,

I want to add Twitter icon to main navigation menu. I read discussion topics and tried things that were suggested but still can not make it work. Could you please help?

Thanks,
Jane

[Rupok]

Hi Jane,

Do you want to add it as menu item? In that case you can add the menu item as custom link and add this to the “Navigation Label” :

<i class="x-icon x-icon-twitter" data-x-icon="" aria-hidden="true"></i>

And add the link to your twitter account to URL field.

Cheers!

[jkonnikova]

Hi, I figured out how to add icon to the menu, but I can not figure out how to open it in a new tab. Please help!

I added icon to the menu as a custom link, is it correct way to do it?

Thanks,
Jane

[Thai]

Hi Jane,

Please click on the screen options button on the top right > check on the Link Target:

http://i.imgur.com/Ce9d97j.png

After that check on the Open link on new tab on your menu item:

http://i.imgur.com/cVCF47v.png

Hope it helps 🙂

[jkonnikova]

Thank you very much, Thai, for your help!
Jane

[Prasant Rai]

You are most welcome. 🙂

[jkonnikova]

I have one more question: how can I change the size and the color of the item?
I’ve added custom css:
.x-nabar\.x-icon-twitter-square{
background-color:blue !important;
height:20px !important;
width:20px !important;
}

It does not help. WHat am doing wrong?

Thank you,
Jane

[Joao]

Hi There,

Try:

.x-navbar .x-icon-twitter-square {

insted of :

.x-nabar\.x-icon-twitter-square{

Let us know how it goes,

If that does not work provide your URL

Thanks

Joao

[jkonnikova]

This reply has been marked as private.

[jkonnikova]

SOrry, I misspelled the URL. Here it is:

davidepsteinauthor.com/wp-admin/

Thank you!

[Friech]

Hi There,

Add this code instead.

li.menu-item a span i {
	color: red;
	font-size: 1.5em;
}

Feel free to adjust the value.

Cheers!

[jkonnikova]

Great, thank you very much!

How do I move the icon along with the ‘Follow” text next to the logo?

Thank you for your help,
Jane

[Thai]

Hi Jane,

Please update the previous CSS to this:

li.menu-item-274 a span i {
    color: blue;
    float: left;
    margin-right: 5px;
}

Hope it helps 🙂

[jkonnikova]

Thank you very much for response,Thai!

This is not what I need. This code puts the icon left to the text ‘Follow’. I need to place the icon and the text ‘Follow’ next to the logo ‘David Epstein’, to the right of it.

If I make it the very first link of the menu, it is too far from the logo. O need it to be close to the logo and the rest of the menu to be the way it is now.

How do I do this?

Thanks much,
Jane

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

li#menu-item-274 {
    float: left;
    list-style: none;
    margin-top: 20px;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript:

(function($) {
   $('#menu-item-274').insertAfter('.x-brand.text');
})(jQuery);

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts