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

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Creating Bootstrap Navigation in WordPress

Andres Ramirez
Andres Ramirez
18,094 Points
Posted by Andres Ramirez
Andres Ramirez
18,094 Points

My menu font is displaying too small! Everything else is fine...

So my Bootstrap to WordPress template is just fine, but the font on the nav menu is displaying too small, also the font in the text below the bottom.

The CSS, JS, and fonts are all linked properly, so I can't really figure out what is going on here! I know I could fix this by creating a custom style.css, but am trying to avoid doing so - as the Bootstrap CSS should be taking care of this.

Any suggestions? Here is my header.php and functions.php:

<?php
function theme_styles() {

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true ); 

}
add_action( 'wp_enqueue_scripts', 'theme_js' );
//add_filter( 'show_admin_bar', '__return_false' );

add_theme_support( 'menus' );

function register_theme_menus() {
    register_nav_menus(
        array(
            'header-menu' => __( 'Header Menu' )
        )
    );
}
add_action( 'init', 'register_theme_menus' );
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <?php
            $args = array(
              'menu'        =>  'header-menu',
              'menu_class'  =>  'nav navbar-nav',
              'container'   =>  'false'  
            );
            wp_nav_menu( $args );
          ?>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

1 Answer

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Hmm. This line in the top of your functions.php file...

wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

...tells me you ARE loading a custom style.css file onto your page, and it's loaded in after the standard Bootstrap CSS file. Is there any chance you have a style in that style.css file that's affecting your font-sizes in those places?

If that's not it, could you share the contents of that style.css file like you have with these other files?

Andres Ramirez
Andres Ramirez
18,094 Points
Andres Ramirez
Andres Ramirez
18,094 Points

Hi Eric! I actually figured it out. The problem was not with any style... The problem was a foundation.css plugin that was previously installed in my WordPress.

I don't know how this foundation.css affected my current site, since it was not in any way included... but I deactivated the plugin and it fixed everything.

Thanks!

Eric Butler
Eric Butler
33,512 Points

Cool! Glad you figured it out!