[SOLVED] CSS Menu font won't change

gr870sfunk · #1 Apr 25, 2013, 02:14 PM

I'm using the Google Fonts plugin in order to use "PT Sans Narrow". That being said, my header consists of several divs:
#menu-header
#logo
#nav
#social
#media
#upper
#men
#lower

I have the font applied in #menu-header and it works for #lower, but not #upper. I have tried adding it everywhere including inline and via the Google Fonts settings, but the menu items in #upper stay in "Oxygen" which is the font for all the other text.

Any thoughts? Thanks!

Here is my css. I know it's a lot:

HTML Code:

#menu-header{
font-family:PT Sans Narrow !important;
width: 980px; 
margin: 0 auto; 
position: relative;
border-bottom:1px solid #9d9d9d;
display:inline-block;
padding:25px 10px;
background:#FFFFFF;
}

#logo{
position:relative;
float:left;
margin: 0 auto; 
width:380px;
padding-left:15px;
}

#nav{
position:relative;
float:left;
margin: 0 auto; 
width:575px;
}

#nav #social{
float:right;
width:22%;
padding-top:10px;
}

#nav #social #media{
padding-left:10px;
float:left;
}

#nav #social #media img{
float:right
}

#nav #upper{
margin-top:55px;
padding-bottom:15px;
border-bottom:1px solid #9d9d9d;
}

#nav #upper #men{
padding-bottom:15px;
list-style:none;
text-transform:uppercase;
margin-left:25px;
}

And here's the HTML:

HTML Code:

<div id="menu-header">
<div id="logo">
<img src="http://66.147.244.109/~leadinm1/wordpress1/wp-content/uploads/2013/04/logo-trans-black.png" width="175" height="135" />
</div>

<div id="nav">
<div id="social" style="margin-left:20px !important;">
<div id="media">
<img src="http://66.147.244.109/~leadinm1/wordpress1/wp-content/uploads/2013/04/facebook-top.png" />
</div>
<div id="media">
<img src="http://66.147.244.109/~leadinm1/wordpress1/wp-content/uploads/2013/04/twitter-top.png" />
</div>
<div id="media">
<img src="http://66.147.244.109/~leadinm1/wordpress1/wp-content/uploads/2013/04/youtube-top.png" />
</div>
</div>

<div id="upper">
<ul id="men">
<li><a style="padding-right:13px;" href="#">About Leading Edge Institute</a>
<ul>
<li><a href="#" title="Boards">Boards</a></li>
<li><a href="#" title="Faculty + Staff">Faculty + Staff</a></li>
<li><a href="#" title="Community Councils">Community Councils</a></li>
<li><a href="#" title="Donors">Donors</a></li>
<li><a href="#" title="Testimonials">Testimonials</a></li>
</ul>
</li>
<li><a style="padding-right:13px;" href="#" title="Blog">Blog</a></li>
<li><a style="padding-right:13px;" href="#" title="Partners">Partners</a></li>
<li><a style="padding-right:13px;" href="#" title="Videos">Videos</a></li>
<li><a style="padding-right:13px;" href="#" title="Photos">Photos</a></li>
<li><a href="#" title="Shop">Shop</a></li>
</ul>
</div>

<div id="lower">
<a href="#">GET INVOLVED</a>      <a href="#">GIVE</a>      <a style="padding:0;" href="#">CONTACT</a>
</div>
</div>
</div>