Docs

[laurenrundquist]

URL: http://www.dreamdigshome.com
WordPress Version: 4.5.3
X Version: 4.6.0
Cornerstone Plugin Version: 1.3.0

Hi there, I would like to add a phone number to my header bar, positioned all the way to the right (as it is currently positioned now). However, I want to style ONLY THIS ONE menu item in several specific ways…

1. When clicked, it should call the phone number.
2. I want NO underline and NO color change on hover.
3. I want the phone number to be a different color from the rest of the navigation items.
4. This is a last priority item and not necessary if it’s too complicated to achieve–I would like this phone number to be always present, regardless of the dimensions of the screen. Currently it disappears with the rest of the menu items into a dropdown on mobile. I don’t know if this is possible…I’m sure it wouldn’t be a menu item if so.

Thank you!!

[laurenrundquist]

P.S. I don’t want to use any child themes. I’ve already spent a bunch of time trying to impliment these changes using a child theme and have been unsuccessful so far. I’d rather edit with custom CSS, if possible.

[Joao]

Hi There

Set your Menu Custom link as the picture below.

URL: tel:+15024160999

Navigation label: +1-502-416-0999

Than on Appereance Customizer Custom CSS add:

#menu-item-124 a span:hover {
text-decoration: none !important;
}

**Note that this CSS will just work if you dont create a new menu item, it is targeted to the Menu item you have there already with your phone number.

Than my last suggestion would be to add a topbar on Appereance Customizer Header

And on the topbar content add:

<a href="tel:+15024160999">+1-502-416-0999</a>

Than on Appereance Customizer Custom CSS add the following code:

@media screen and (min-width: 779px) {
.x-topbar {
display: none !important;
}
}

This way your topbar will appear just when your navigation bar shrinks to mobile mode.

Hope that helps

Joao

[laurenrundquist]

Thank you. I have implemented both changes to compare how the look.

The first option with the menu link does not seem to be changing the appearance (the underline is still there on hover, and the color changes on hover). Also, how might I go about changing the color of that text all together, perhaps to green?

The second option with the topbar content isn’t placed how I’d like it. I would love to remove the social links from the topbar, and place the phone number on the right hand side instead.

Can you please tell me how I can make these changes to both options? Thank you!

[Thai]

Hi There,

Please add the following CSS:

/* Option #1 */
#menu-item-124 a,
#menu-item-124 a:hover {
    color: #8BC34A;
}
#menu-item-124 a:hover span {
    box-shadow: none;
}

/* Option #2 */
.x-topbar .x-social-global {
    display: none;
}
.x-topbar .p-info {
    float: right;
}

Hope it helps 🙂

[laurenrundquist]

Helped a bunch! Thank you 🙂

[Joao]

Glad to hear it.

Joao

[Author]

Posts