Change text color of only one heading/shift button down

[Kevin E.]

Hello...I am trying to make a couple of small changes that is giving me a huge challenge. On the page, I am trying to change the color of the text for the heading March for Meals only.  Every way I have tried, it ends up changing the color of all of the headings

The second issue is the Donate Now button. I am trying to move it so that it appears directly under the social media icons.

Any assistance would be greatly appreciated!

Aging Disability and Transit Services of Rockingham County

[osgood_]

Easy one first.

I assume by 'heading March for Meals only' you are refering to the navigation item in the orche colored bar?

If so give your <li> tag a class name:

<li class="march-for-meals"><a href="march.html">March for <br>Meals</a></li>

Then add the below css selector to your css stylesheet:

.march-for-meals a {

color: brown;

}

Now for the more complex one.

Contain your social icons and the donate button in their own <divs>, wrapped in a parent <div> (see below)

<div class="social-icons-donate">

<div class="social-icons">

<a href="http://www.twitter.com/adtsrc_nc"><img src="images/twitter.png" title="Link to ADTS Twitter feed " width="35" height="35"  /></a> 

<a href="http://www.instagram.com/age_in_rockingham_county"><img src="images/instagram.png" title="Link to ADTS Instagram page " width="35" height="35"  /></a> 

<a href="http://www.facebook.com/adtsrc"><img src="images/facebook.png" title="Link to ADTS Facebook page " width="35" height="35"  /></a>

</div>

<!-- end social-icons -->

<div class="donate">

<a href="https://adtsrc.networkforgood.com/projects/68585-annual-campaign"><img src="images/Donate-Now.png" title="Click to donate to ADTSRC " height="35"  /></a>

</div>

<!-- end donate -->

</div>

<!-- end social-icons donate -->

</ul>

<!--end main-navigation-->

Then add the following css selectors to your css stylesheet:

.social-icons-donate {

display: flex;

flex-direction: column;

}

.social-icons {

display: flex;

justify-content: space-between;

}

@media screen and (max-width: 768px) {

.social-icons {

justify-content: center;

}

}

[Kevin E.]

Okay, I'm tackling the "easy" one first. I have made the changes and uploaded them, but the text color hasn't changed.

[John Waller]

Put the ".march-for-meals a" rule at the bottom of the CSS sheet, after the main navigation style rules.

[Kevin E.]

Nope...still no go. I put it at the end of the single page template and multi-column template css pages.

[John Waller]

Increase the specificity of the rule:

.main-navigation .march-for-meals a {

     color: brown;

}

[BenPleysier · Accepted solution]

You have got many preventable errors in your document that are most likely creating your problems. Have a look here for more Showing results for http://www.adtsrc.org/index-2-19.html - Nu Html Checker

Despite these errors, you could place an in-line style rule that will change the colour of the menu-item. Just add the highlighted:

<li class="march-for-meals"><a href="march.html" style="color: brown">March for <br>Meals</a></li>

[Kevin E.]

This one did it...thanks!

[osgood_]

https://forums.adobe.com/people/Kevin+E.  wrote

Okay, I'm tackling the "easy" one first. I have made the changes and uploaded them, but the text color hasn't changed.

Have you also uploaded your css stylesheet as I don't currently see the css selector below include in it?

.march-for-meals a {

color: brown;

}

You've added the class to the <li> I can see that.

[Kevin E.]

I believe I have. What specific style sheet should it be?

[osgood_]

https://forums.adobe.com/people/Kevin+E.  wrote

I believe I have. What specific style sheet should it be?

There is only one stylesheet linked to your page:

multiColumnTemplate.css

The css selector should have been in that stylesheet BUT it wasnt. However If this is only temporary then using an inline css style, as suggested, is ok. You don't need the class="march-for-meal" applied to the <li> since youre not using the css selector workflow.

<li class="march-for-meals"><a href="march.html" style="color: brown">March for <br>Meals</a></li>

Now all you have to do is ensure your inline css style is applied to all your pages where you want the link to be a different color as it doesn't look like you are using a workflow which automatically includes your navigation on every page.

[Nancy OShea]

<it doesn't look like you are using a workflow which automatically includes your navigation on every page.>

A very good point.  Server-Side Includes for sitewide navigation are a must have.

Server-Side Includes with PHP

[Nancy OShea]

Unless I'm missing something, March for Meals is not a heading <h1>, <h2> or <h3>.  It is a text link inside your navigation bar.   Is that the text color you want changed and if so why? 

Typically all hyperlinks are styled the same way to give users a visual indication of  which ones they have already visited and where they are on the site currently.   Consistent link styles are especially important when working with aged and disabled target users.  Please refer to the latest  Web Accessibility Guidelines.

What are the Web Content Accessibility Guidelines?

Link styles come from the 6 CSS pseudo-classes.

• a  -- any link
• a:link -- an unvisited link
• a: visited -- a visited link from the browser's history folder
• a:hover -- on mouseover (has no effect on touch screens)
• a:active -- on click / tap and hold
• a:focus -- on focus via tab or arrow keys

[Kevin E.]

Nancy, this is simply a case of doing what the client wants. They want to change the color of that particular link to make it stand out during the promotion month.