Phone Button in Menu

[mikedoughty]

Hi,

We have a button in our menu we’ve used for our telephone number and we’ve put code so it dials.

However, it seems to be pushing the button down causing it not to align with the other elements when viewed in a browser, usch as Chrome.

How can we resolve this.

See our Home page to see the issue.

https://getbusiness.fit/

Thanks, Mike

[friech]

Hi Mike,

Thank you for writing in, how did you add your button to the menu? It seems to broke the HTML markup.

Please add the telephone number as a normal menu item. Then follow the guide here to style it like a button.

Hope it helps,
Cheers!

[mikedoughty]

Hey,

Thank you for your assistance. There is a minor issue which I am facing at the moment.

I followed the instructions and created a button, the problem is that the button’s background colour is not what it’s supposed to be and we would like to have a hover effect on the same.

The button should be #254CA2 colour and the text #0000FF, as soon as someone hovers it the colour should be #F31B22.

Thank you

[ruenel]

Hello There,

In that case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .desktop .x-nav .libtn a {
    background-color: #254CA2;
}

.x-navbar .desktop .x-nav .libtn a:hover {
    background-color: #F31B22;
    box-shadow: inset 0 4px 0 transparent;
}

.x-navbar .desktop .x-nav .libtn a span {    
    color: #0000FF;
    border-radius: 0;
    margin-top: 4px;
}

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

[mikedoughty]

It Works!!

Thank you.

[friech]

You’re more than welcome, glad we could help.

Cheers!