Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Andres Ramirez
Andres Ramirez
18,092 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

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,092 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!

Cool! Glad you figured it out!