Hello.
To answer your 2nd question first, you will need to add a style to your child theme style sheet that overrides the twentytwelve style for current page default color.
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363; <---- change this!
font-weight: bold;
}
Re: your first question, you can accomplish this with css, but it would take many steps. I would recommend looking through the WordPress Themes Directory, finding a full-width theme that looks more like what you want and making a child theme of it.
Hey there,
- You are going to want to copy the code from the original header.php into your child theme’s header.php
- Then change the width of #page 100%
- Now change #main .wrapper width to the original width or the width you want so it keeps your content contained and doesn’t make it have a 100% width as well.
- Set the margin of #main .wrapper to 0 auto to center the content.
- now target your #masthead or the header element and set width to 100%
- You may have to mess with centering the menu or placing menu items where you want but the header and navigation should be fluid
- Note: pay attention to your nested elements. This can make this things confusing in twenty twelve due to the fact that everything on the page is contained in #page
I hope this helps please ask if you have any more questions or if this didn’t work for you.
Regards,
Andy
Tracy– thank you, 2nd question answered.
Andy– I copied the header.php code into my child but I could not locate anything you said. Here it is:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width=100%"<?php echo get_custom_header()->width; ?>" height=100%"<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
If this is too complicated, I might just have someone do it for me. Thanks for any help!
Hello.
The changes Andy mentioned in his post happen in your stylesheet, not the header file itself.
You can use the selectors Andy lists and place them in the stylesheet in your Child Theme.
That’s probably not the best way to do what you want. It will likely work better to move the header/menu section outside of the #page div – and then modify the CSS for the header/menu section.
