Can You Add a Background Colour Behind a Nav Link and Icon Next to it?

[core365]

Hi, I’m working on a site and I was wondering if it’s possible to add an icon next to the page name in the nav bar and to also add a background colour to it so it stands out. I’ve done a rough mockup to show how I’d like it to look - it’s the ‘Get a Quote’ link in the nav bar.

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

[mldarshana]

Hi There @core365,

Thanks for writing in! Yes, it’s possible to achieve those changes. While custom development is fall beyond our scope of the support, please use this as a guidance and implement your changes accordingly.

First head over to Appearance -> Menus section and click on the Screen Options on top right hand corner.

From there, enable CSS Classes option.

Then you can assign a CSS class to your menu item (my-quotation)

You can also add the corresponding CSS rule into your

.my-quotation {
    background-color: red;
    height: 55px;
}

You can also add an icon HTML into your menu item directly.
<i class="x-icon-angle-double-right" data-x-icon-s="&#xf101;"></i>

Hope that helps.

[core365]

Hi, that’s a great help, thanks! The blue background behind the button doesn’t fit around the text ‘Get a free quote’, it floats above it and overlaps the topbar. I’ve tried to sort this myself with CSS, but can’t figure out how to do it.

Also, is there a way of changing the font colour to white instead of black? Again I’ve tried to sort this myself with CSS but it refuses to change colour!

Thanks!

[thai]

Hi @core365,

Please delete your custom CSS and add the following CSS instead:

.x-navbar .desktop .x-nav>li.free-quote a {
    color: #fff;
    padding-top: 70px;
}
.x-navbar .desktop .x-nav>li.free-quote a span {
    background-color: #082655;
    padding: 10px 15px;
    border-radius: 5px;
}

Hope it helps

[core365]

Hi @thai, that’s excellent, exactly how I wanted it! Thank you so much!

Cheers!

[jade]

You’re most welcome, @core365.