Nav Bar Font Awesome Icon & boarder

Support
#1

Alright so I have reviewed the forum and am unable to find a solution for what I am trying to accomplish.

I want to put the fa-angle-right font awesome icon right before the “Login” nav bar link. I also want to but a box around the login nav.

Site: http://slcstage.flywheelsites.com/

Icon:

#2

Hello There,

Thanks for posting in!

1.) To put the fa-angle-right font awesome icon right before the “Login” nav bar link, please edit your menu in Appearance > Menus and insert <i class="x-icon-angle-right" data-x-icon="&#xf105;" aria-hidden="true"></i> before the Login text in your menu label.

2.) To put a box or border around the Login menu item, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .x-navbar .x-nav > .menu-item-331 a{
    margin-top: 10px;
    padding: 5px 10px;
    border: solid 1px #50d574;
    height: auto !important;
    box-shadow: none !important;
}

We would loved to know if this has work for you. Thank you.

#3

Thanks for your help!

Font Awesome is working great now.

Here is the issue I am now having with the box: I want the nav text to still be inline with the rest of the nav bar text. I changed your CSS a little to get it close. Now I am trying to have the box outline not bleed off the top of the page. See attached image:

here is the CSS I am using right now:

body .x-navbar .x-nav > .menu-item-331 a{
margin-top: -2px;
padding: 2px 2px;
border: solid 1px #50d574;
height: auto !important;
box-shadow: none !important;
}

#4

Hi there,

Please try:

body .x-navbar .x-nav > .menu-item-331 a {
    padding: 2px 2px 2px;
    border: solid 1px #50d574;
    height: auto !important;
    box-shadow: none !important;
    border-top: 0;
    padding-top: 19px !important;
}

Hope this helps.

#5

Jade-

Thanks for your help
I was able to get it to work by adjusting your CSS a little:

Here is what i used:
body .x-navbar .x-nav > .menu-item-331 a {
margin-top: 15px;
padding: 2px 2px 2px;
border: solid 1px #50d574;
height: auto !important;
box-shadow: none !important;
padding-top: 1px !important;
}

I just noticed though that the boarder is going to the edge on the mobile menu, is there a way to change it to just being around the login text?

#6

Hello @zeppelin203,

Thanks for updating thread.

Please add following CSS under X > Launch > Options > CSS:

.x-navbar .mobile .x-nav li > a {width: 45%;}

Please let us know how it goes.

Thanks.

#7

Perfect this code worked. Thanks for the help & support!

#8

Glad to hear it :slight_smile:

#9

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