Docs

[piexec]

I need some help on the CSS for the Top Bar Menu.

1. How do I get the “hover” effect off the pipe line I have between the links?
2. How do I add Icons to the menu that are #fff in color? <i class=”x-icon x-icon-user”></i>
3. How do I also prevent the Icon from getting underlined on hover?

Thanks in advance! This support is hands down what keeps me purchasing your theme.

[piexec]

This reply has been marked as private.

[Christian]

Hey there,

1. Please add the code below in your Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover:after {
    color: orange;
}

2. Sorry but I’m not sure what you’re trying to achieve. Please give us more details.

3. You’ll need to wrap the text with a span with a custom class like <span class="underline">Home</span>. Then add the code below in your Appearance > Customize > Custom > CSS

/* Remove menu item underline */
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none !important;
}

/* Add underline to menu item text only*/
.x-navbar .desktop .x-nav > li.current-menu-item > a > span .underline {
    box-shadow: 0 2px 0 0 #de964a !important;
    padding-bottom: 5px;
}

Hope that helps. 🙂

[piexec]

I added that code and it didnt quite work. Could you login to my admin and take a look and see what I’m doing wrong please. Remember, this is for the TOP BAR navigation.

[piexec]

See attached “Contact Us” link as an example. I need #fff icon to the left of each menu item, and I need it to NOT get underlined on hover.

Hope this helps

[Lely]

Hi There,

1.) Please update this CSS:

.top-menu li :after {
    content: "|";
    color: #fff;
    margin-left: 15px;
    margin-right: 5px;
}

To this:

.top-menu li >a:after {
    content: "|";
    color: #fff;
    margin-left: 15px;
    margin-right: 5px;
    text-decoration: none;
    display: inline-block;
}

2.)
Add icon shortcode like this:
[x_icon type="user"]

On your child theme’s functions.php file, also add this line:
add_filter('theme_mod_x_topbar_content', 'do_shortcode');

3.)
Also add this CSS:

.top-menu li a i {
    color: #fff !important;
}
.top-menu li a:hover i {
    text-decoration: none !important;
}

Hope this helps.

[piexec]

Got everything but where do I add the shortcode? [x_icon type=”user”]???

[John Ezra]

Hi there,

Thanks for updating the thread! You add the shortcode where you want your element to appear. Usually this is done within a text/html widget. Hope this helps – thanks!

[piexec]

I added it here, but all I get is the shortcode showing up in the page.

[piexec]

I added it here.

[Lely]

This reply has been marked as private.

[piexec]

That worked. But I want to add more.

I’m assuming the “/f007” defines the icons, becuase I want to add others. Where do I get the list of what numbers correlate to what icons?

Icons

I don’t see it here.

[Rupok]

Hi there,

You will find them here – http://fontawesome.io/icons/

Just open any icon and you will find the UNICODE – http://prntscr.com/c3leoz

Remember to place backslash as the suggestion above.

Cheers!

[Thai]

Hi There,

You can find the Unicode of icons on this page: http://fontawesome.io/icons/.

For example http://fontawesome.io/icon/cloud/

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

Hope it helps 🙂

[piexec]

This reply has been marked as private.

[Author]

Posts