Nav bar Icon not Displaying

Support
#1

Hi,
So I’m trying to place a user icon next to my account menu item and it’s not displaying.

Can you please help me figure out why it’s not showing up?

Thank you!

#2

Hi @quituck,

Please follow the steps below:

  • Go to WordPress Dashboard > Appearance > Menus.
  • At the top right section of the screen click the Screen Options.
  • Check the CSS Classes Checkbox:
<i class="x-icon x-icon-user" data-x-icon="" aria-hidden="true"></i> Account

  • Find the Account menu item and add this as the Navigation Label:

  • And add account inside the CSS Classes (optional) setting.

I found the HTML code of the icon by checking the code of the icon in my browser here.

  • Go to X > Theme Options > CSS and add the code below:
.account.menu-item i {
    margin: 0 5px 0;
}

The code above can be the basis of your customization and styling of the icon.

Thank you.

#3

Thank you. Can you also help me to center my navigation menu in the footer?

#4

Hi @quituck,

Would you please kindly give us a screenshot of the case you are talking about? Currently there is a menu in the left hand and a copyright text in the right hand. If you center the menu it will have imbalance as left side will be empty, center will be menu and right side will be copyright.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#5

Here is the screenshot

#6

Hi @quituck,

Now I see what you mean. Please kindly go to WordPress Dashboard > Pro > Footer and select the Footer you have. Then please locate the Navigation Layer element that you used and click the Customize tab and click the Element CSS option and add the code below there:

$el.x-menu .x-anchor .x-anchor-text {
    width: 100%;
}

If you want to know more details and how to use the Element CSS feature please kindly click here.

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

Thank you.

#7

Hi,
That did not help. I’m using a global block for the footer and I’m not using the pro version. Please advise.

#8

Hi @quituck,

I tried checking the site you have provided but it is not accessible at the moment (see secure note).

Kindly double check the site so that we can provide you with suggestions.

Thank you.

#9

Sometimes that happen. Please try again.

#10

Hi @quituck,

Yes that’s correct the image was posted in a secure note so it was only visible to you and our staff members, however i have removed the image. I tried to check your site but it is not loading on my end either, I’m getting the same error as Jade. To center the menu items you can add the following code in the Theme Options > CSS:

.widget_nav_menu, .widget_pages {
    text-align: center;
}

Let us know how this goes!

#11

Hi,
That did not work. I also tried it like this:
.widget_nav_menu, .widget_pages {
text-align: center !important;
}

Please advise.

Thank you!

#12

I figured it out. I needed to change the text alignment to “auto” in the settings. No CSS needed.

Thanks anyway for your help.

#13

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

#14

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