Change color and font of Mobile Navigation Bar

[Shannon]

Hi,

I would like to makes two changes to the navigation bar on my mobile version.

1) My desktop nav bar is pink. I would like it to continue to appear pink on the “homepage” screen of the mobile version as it currently does, but be black on all other pages (only in the mobile version not desktop).

2) I have imported a Google font to my CSS file using this code:

@import url(http://fonts.googleapis.com/css?family=Dancing+Script:700);

How can I change the font of my website name that appears in the nav bar on the mobile version to the Dancing Script font?

Thanks

P.S. Hope your new theme is doing well. =)

[Alyssa]

@flick-chicks
1) add to custom.css:

#mobile-header{background-color:black;}
.home-page #mobile-header{background-color:pink;}

2) add to custom.css:
#mobile-header .mobile-site-title{font-family:Danging Script;}
NOTE: I’m not sure of the actual name of this font so #2 may not be correct. Contact Google for support there if needed.

[Shannon]

@tjchester, worked perfectly. =)

In case others read this thread, just wanted to share that I also increased the font size by adding the following below the font-family since the dancing script font is slightly small:

#mobile-header .mobile-site-title {
font-family:Danging Script;
font-size:140%;
}

Thanks!

[Alyssa]

Awesome, glad I could help.