Not sure what you are going for … Would that work for you?
nav > a {
color: orange;
}
This is one among several possible approaches:
Thanks that’s sorted that problem out how can I make my navigation like RNA Plants website can you please help me?
(Was adding that to my previous answer in the meantime.)
Can you please help me code it please then I can learn how to do it the correct way
If you can help me create the navigation as you mentioned above this will help me to learn something new and as I suffer from anxiety it will also help me to give the confidence booster I need.
If I were in your shoes, I would break this down into simplified subtasks, to try things out. Specifically, I would create 2 sandboxes outside of your project. (e.g. on jsfiddle.net / codepen.io or in separate files.) Forget about aesthetics for this, just focus on the functionality.
Create a sandbox that just makes this change happen with CSS media queries:
Create another sandbox that just makes this change happen with JS:
(Use the tutorial I linked to above)
I am sorry I don’t have the confidence to do that are you please please willing to code it how you would do it that way I can learn how to do it the correct way as I want it to look like RNA navigation on a desktop and like it does on a phone, I would be ever so great full if you can help me.
I’m really sorry to bother you
I’m really sorry to bother you
Just try the first thing. You gain confidence by building something yourself. When you are stuck, post your code - however little you may perceive it to be - and I am happy to answer your next question.
I really don’t know where to start can you please help me as this is stressing me out and raising my anxiety levels can you please show me the correct way to code what I’m looking to do that way when I do it next time I know i can do it as i would have the confidence to do it.
I’m so sorry if you think I’m a pain
There is no “correct” way. “Correct” is when you or your customer think it does what it should. There are many possible ways. You can make sure to pass this validator and read about accessibility for mobile menus - but as of now, that might just fry your brain. (And people don’t fully agree on that stuff, so bookmark it and start building.)
Just do this:
PS: Whatever your age, this book has great lessons about anxiety.
(5$ as ebook)
Can you please code it for me please as I’m so stressed at the moment doing that I feel that will just push me over the edge. I would be ever so great full if you could do that for me that will help me to relax.
Can I use this from Codepen https://codepen.io/drweb/pen/jOERrxb can you help me include that in my website please?.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding 
<!DOCTYPE html>
<html>
<head>
<title>S D W Sports Massage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 style ="color:white"> WebSiteName</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<!-- Sizing the image tag works -->
<div class="pink 500">
<img
class="full-width"
alt="Sunset Panorama"
src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/s960x960/90243213_2597062143947842_2578180378577600512_o.jpg?_nc_cat=106&_nc_sid=110474&_nc_ohc=oB5kRZmiaWUAX-lgHuu&_nc_ht=scontent.flhr3-2.fna&_nc_tp=7&oh=f1d0b5531ea07c86b70ef97a8a2d8934&oe=5ED67C9D"
/>
</div>
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Opening Hours</h4>
<ul class="list-unstyled">
<li>Mon- Friday: 9am-9pm</li>
<li>Saturday: Closed</li>
<li>Sunday: Closed</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Address</h4>
<ul class="list-unstyled">
<li>Unit 12A,</li>
<li>Heol Y Parc,</li>
<li>Pontyberem,</li>
<li>Llanelli,</li>
<li>Carmarthenshire,</li>
<li>SA15 5EA</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Get In Touch</h4>
<ul class="list-unstyled">
<a href="tel:07976 245956" style="color: white"> Mobile : 07964022613</a>
<br>
<a href="tel:01269269189" style="color: white"> Tel : 01269269189</a>
<p><a href=" mailto:siondafyddwilliams@gmail.com" style="color: white"> E-mail: siondafyddwilliams@gmail.com</a></p>
</ul>
</div>
</div>
<div class="col-md-3">
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><a href="https://www.facebook.com/SDW.SMT/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<a href="https://www.instagram.com/sdw_smt/" target="_blank" rel="noopener noreferrer"><img class="alignnone wp-image-84" src="Instagram.png" alt="" width="37" height="39" /></a>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center"> S D W Sports Massage © | OKB Design </p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
As ieahleen pointed out it consensus here, that we don’t simply hand out solutions, because we don’t believe it’s a good way to learn. There is this common saying:
Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.
I think there is a lot of wisdom in that. If you like the style of the tutorial you posted, I would suggest that you go through the tutorial, build a jsfiddle/codepen while you do that and in case you get stuck, post your demo and ask a specific question.