Can't move phone number on menu bar

Hello,

My website is sequimcounseling.com

I have tried to embed code per instructions from this site to embed a phone number, but it hasn’t worked. I have attached a custom link on my menu bar, added CSS Classed and inserted a phone-menu. It appeared in the menu, but the menu was too wide to appear on a single screen on my computer, which I didn’t like. I would like the phone number to appear on the right side of the menu, but stand out as different from the menu items.

Any help is much appreciated.

Thanks,
Doug

Hi,

Please add the phone number to your menu item and let me know how would you like to have it different, so I can check if it’s possible.

Kind Regards,
Csaba

Thanks for your help with this. I added the phone number to my menu item.
I would like it to appear with a button (the same color as my click to
begin button) in white, bold text, with a phone icon next to it. I would
like it to be on the same line as my other menu items on the top right hand
of the screen. Please view this website for an example:

Does that make sense?

Thank you!
Doug

Hi,

You can make the phone number menu item to look like a button with this Custom CSS:

.menu-item-1621 a {
    color: white !important;
    background-color: #6b97bf;
    padding: 10px !important;
}

You must add less items to your menu if you want to show the button on the right-hand side, as you can see on the example website, they have managed to have the button on the right by not having more then 6 menu items.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi,

thanks for your help. I made the changes, but then a box appeared without
the phone number inside it. I have sine deactivated the additional code.
Is there a way you could have the phone number show up with at telephone
icon? Also, I’m wondering if it’s possible to see an option where there is
not box, just the telephone number and a telephone icon to the left of it.
Could I see both options? I so appreciate your help.

Thanks,
Doug

Hi,

Please add this Custom CSS too to make the menu text white:

#mainnav ul.menu > li.menu-item-1621 > a {
    color: white !important;
}

The icon you must add using an icon code like this:

<i class="fa fa-phone"></i> inside the menu item label ( before or after the telephone number text depending where you would like to have the icon ).

Please let me know how it works.

Kind Regards,
Csaba

Wonderful. Thanks for your help!

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba