#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; }
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>