Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Trent Burkenpas
22,388 PointsHow do you change the font, for foundation nav bars?
I have been working with foundation, and i have no idea how to change the for my navigation. I guess I just dont know how to call the class?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/style.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<header>
<div class="main_title">
<h1>Top Pop Card</h1>
<h3>Stainless Steel Bottle Openers</h3>
</div>
<!-- Navagation -->
<div class="contain-to-grid">
<nav class="top-bar" data-topbar data-options="sticky_on: large">
<ul class="title-area">
<li class="name">
<h1><a href="#">Top Pop Card</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">About</a></li>
<li ><a href="#">Contact</a></li>
<li class="has-dropdown">
<a href="#">Shop</a>
<ul class="dropdown">
<li><a href="#">Man Card</a></li>
<li><a href="#">Ace of Dimonds</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Navagation End -->
</header>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
How would I edit the title_area, I want to change the font.
3 Answers
Anthony Skelton
11,334 PointsAre you using Sass? Much of the styles in Foundation can be controlled via variables in the _settings.scss file.
The variable for the links in your topbar navigation is $topbar-link-font-family. You can uncomment this and change it to what you want. The title of the site that's in the first list item with the class of "name" is an h1 and the font can be set with $header-font-family.
If you're just using CSS you can target the style with:
.top-bar .name h1 { }
.top-bar-section ul li > a { }
I haven't used Foundation in a while so hopefully this helps are at least points you in the right direction.
Trent Burkenpas
22,388 PointsHey thanks for the quick replay. I am using Sass. I did change the $topbar-link-font-family, but that only changes the links. I want to change the Title. The element over the the left.
Anthony Skelton
11,334 PointsIt looks like there isn't one variable to control just the font for the Title in the nav bar. It uses the font that you've assigned for all your headers with the $header-font-family.
If you want this font to be different than the rest of your headers you can go to - scss / foundation / components / _top-bar.scss
If you haven't changed that file at all then around line 181 is the .name class that you can add your font-family definition.
Trent Burkenpas
22,388 PointsI just did it, in my scss file. Thanks for the help!