Changing header size on WordPress theme

Barrage

Junior Member
Joined
Oct 22, 2013
Messages
139
Reaction score
38
Hey guys, I am in the making of my first website, and worked a bit on the layout now. But with my theme, the header has a fixed size, which I believe is way too small.

Therefore I would like to change the header size. I am not sure how to this, I checked out header.php file, but I am not sure what to change, since there are no numbers that I just easy can adjust, like if it would of been HTML. I know a lil' bit HTML but nearly nothing PHP.

The team I am running: http://www.elegantthemes.com/demo/?theme=SimplePress
Current header size: http://gyazo.com/a64be0908ea89203c36598ffc1211b8d
Wanted header size: http://gyazo.com/e54afa4ad182e7a88ee6a7c41473dfc1

When I am at WordPress and go to Appearance - Editor - Header.php file, I get this code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php elegant_titles(); ?></title>
<?php elegant_description(); ?>
<?php elegant_keywords(); ?>
<?php elegant_canonical(); ?>


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<script type="text/javascript">
    document.documentElement.className = 'js';
</script>
<?php wp_head(); ?>
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie6style.css" />
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">DD_belatedPNG.fix('img#logo, .slider_image img, .banner, .banner .readmore, .wrap .image img, .thumb div .image img, div.avatar span.overlay');</script>
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie7style.css" />
<![endif]-->
</head>
<body <?php body_class(); ?>>
<div class="wrapper">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php $logo = (get_option('simplepress_logo') <> '') ? get_option('simplepress_logo') : get_template_directory_uri().'/images/logo.png'; ?>
    <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" id="logo"/></a>
    <div id="navwrap">
        <span class="nav_top"></span>
        <?php $menuClass = 'nav superfish';
        $primaryNav = '';
        if (function_exists('wp_nav_menu')) {
            $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
        };
        if ($primaryNav == '') { ?>
            <ul class="<?php echo esc_attr( $menuClass ); ?>">
                <?php if (get_option('simplepress_home_link') == 'on') { ?>
                    <li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e('Home','SimplePress') ?></a></li>
                <?php }; ?>


                <?php show_page_menu($menuClass,false,false); ?>
                <?php show_categories_menu($menuClass,false); ?>
            </ul> <!-- end ul.nav -->
        <?php }
        else echo($primaryNav); ?>


        <?php do_action('et_header_menu'); ?>


        <?php global $default_colorscheme, $shortname; $colorSchemePath = '';
        $colorScheme = get_option($shortname . '_color_scheme');
        if ($colorScheme <> $default_colorscheme) $colorSchemePath = strtolower($colorScheme) . '/'; ?>
        <br class="clear" />
        <span class="nav_bottom"></span>
    </div><!-- #navwrap -->

Thankful for all help or tips!
 
Add this to your css file.

Code:
body .wrapper:first-child > a:first-child {
    display: block;
    width: 100% !important;
}
body .wrapper:first-child > a:first-child > img {
    width: 100% !important;
    height: 150px !important;
    margin: 0 !important;
}
 
Add this to your css file.

Code:
body .wrapper:first-child > a:first-child {
    display: block;
    width: 100% !important;
}
body .wrapper:first-child > a:first-child > img {
    width: 100% !important;
    height: 150px !important;
    margin: 0 !important;
}

Thanks for the tips, it did indeed work and made my header bigger. The downside however was that it also made my header very fuzzy. It seems like when I upload header, it first goes to the old header size, and with this CSS code just zooms it up, which I believe is making it fuzzy. Any way to get around that?

If not, thanks for the tips!
 
I assume the theme has its own panel and you upload the header though that? In that case, give a few $ to a freelancer to locate the resizing function in the code and remove it for the header 's case. See the "Hire a Freelancer" section for that.
 
Try to add this at the bottom of the style.css

#logo {
height: 157px;
margin-left: -179px;
width: 1300px;
}
 
I assume the theme has its own panel and you upload the header though that? In that case, give a few $ to a freelancer to locate the resizing function in the code and remove it for the header 's case. See the "Hire a Freelancer" section for that.

Okey I will go to the freelance section!


Try to add this at the bottom of the style.css

#logo {
height: 157px;
margin-left: -179px;
width: 1300px;
}

Thanks for the tips, didnt take away the fuzziness tho :/
 
Back
Top