Change Theme Color to Navy Blue

How can I change the theme color from Blue to Navy Blue?

Client wants a deeper shade of blue. Specifically requested navy blue #02437B

Can I add some css to make this happen?

 

Adding to this question to say that...I pasted the following code into my Custom CSS section (which fixed most of the problem), but I still need help because I also want to change the background of the Quotes in the Testimonial section, and I also want to Ensure that the header stays navy blue when viewed on a mobile device.

Here is the code I used:

.topinfobar {
background: #02437B !important;
}
#menu li:hover a, #menu li.current_page_item a {
background: #02437B !important;
}
.content-bar .post .post_content .read_more {
background: #02437B !important;
}
.footer-wrapper .footer {
background: #02437B !important;
}
.feturebox .featurebox_inner .featurebox_desc .readmore {
margin-top:28px;
margin-bottom:5px;
display:block;
font-family: 'Pontano Sans', sans-serif;
color: #ffffff;
font-size: 12px;
text-decoration: none;
padding: 6px 8px 8px 8px;
text-decoration: none;
border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: 0px 1px 1px #ed7a37;
-moz-box-shadow: 0px 1px 1px #ed7a37;
border: solid #02437B 1px;
background: #02437B;
width:92px;
}

Here is the URL http://www.sugarlandtxseo.com

If you shrink the screen down you will see the header change color back to the normal blue instead of staying navy blue. Can you tell me how to prevent the color change in mobile mode?

Also, is there any way to make the accent color on the sidebar navy blue instead of the original blue that comes with the them? And I have the same question for the contact form on the home page, how can I make that accent color navy blue instead of the original blue? And one last question, how do I make the tiny downward pointing triangle in the middle of the header navy blue instead of the original blue?

 

Hello,

Greetings from InkThemes,

You can resolve it yourself, All you have to do is just go to Dashboard->Appearance->Theme Options->Styling Option->Custom CSS

field and try to cut paste the given below CSS code there

Code:

@media only screen and (max-width: 767px) and (min-width: 480px)
.topinfobar div.info {
  background-color: #02437B !important;
}
 
@media only screen and (max-width: 960px) and (min-width: 768px)
.topinfobar div.info {
  background-color: #02437B !important;
}
 
.topinfobar .toptip {
  display: none;
}

For Tiny downward pointing triangle and background of the Quotes in the Testimonial section these all are image you can replace with your desired image

Hope this will resolve your issue.

Do let me know if you need more assistance,


I would be glad to assist you further,

 

Sobhagya, thanks for the help. That code got rid of the top tip, however, I am still having trouble with the top info bar changing back to the original blue color in mobile mode or when the screen is made smaller.

What code can I use to keep the text background from changing back to the original blue in mobile mode?

 

Hello,

Greetings from InkThemes,

You can resolve it yourself, All you have to do is just go to Dashboard->Appearance->Theme Options->Styling Option->Custom CSS

field and try to cut paste the given below CSS code there.

Code:

@media only screen and (max-width: 960px) and (min-width: 768px)
.topinfobar div.info {
  background-color: #02437B !important;
}
 
@media only screen and (max-width: 767px) and (min-width: 480px)
.topinfobar div.info {
  background-color: #02437B !important;
}
@media only screen and (max-width: 480px)
.topinfobar div.info {
  background-color: #02437B !important;
}

Hope this will resolve your issue.

Do let me know if you need more assistance,

I would be glad to assist you further,