Copying styling/formatting from one widget to another

For color and font related .pre-header-widget li a:link {/* css here */} should do it, you’ll also need .pre-header-widget li a:hover. To clear the list style bullets use .pre-header-widget ul. There may be more, but this should get most of it.

Use your browser’s developer tools to help you. With it you can see what styles are currently applied. Highlight the HTML you wish to address, then find the way to add a style rule. The tool should suggest the proper CSS selector to target what’s highlighted. It’s not always correct, but it’s a start.

Thank you, bcworkz. I’ve made some progress. However, I can’t figure out two things:

1. The heading for the pre-header widget is h3, while the heading in the footer is h4. Is there any way to force the pre-header widget’s heading to display as h4? I tried forcing it with

.pre-header-widget .h3 {
//specifications provided for h4 in style.css
}

but that did not work.

2. I can’t get the hover transitions to work. I copy-pasted all of this stuff into the customizer:

.pre-header-widget a {
  transition: all .2s ease;
}

.pre-header-widget li a:link {
  color: #8c8c8c;
  cursor: auto;
  font-family: raleway, sans-serif;
  font-weight: normal;
  opacity: 0.6;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.pre-header-widget li a:hover {
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: ease;
}

None of it did anything, as far as I can tell.

Any ideas?

Elsewhere, someone helped me fix the pseudo-class problems. However

1) I’m still having trouble targeting the heading. It was suggested I try

.pre-header-widget > h3 {
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.34;
}

but that doesn’t work, either.

2) For some reason, the mouse doesn’t register the pre-header widget’s links as links but as text. Any idea why?