Header and nav menu problem on Thesis site

1 Views

Unfortunately I managed to make the header image disappear and the horizontal nav menu distort on this Thesis themed WordPress site I’m helping a friend with

www.euanmitchell.com.au

Read More

I’ve pasted the code from Thesis custom.css and custom-functions.php below. Any help is much appreciated.

Cheers,

Les 

    File: custom.css
Description: Custom styles for Thesis
More Info: http://diythemes.com/thesis/rtfm/custom-css/
*/

#header {
border: none;
background-image: url(http://euanmitchell.com.au/wp-conten...bannerv6.jpg);
background-repeat: no-repeat;
height: 208px;
padding: 0;
position: relative;
}

.custom #header #logo a {
text-indent: -9999px;
width: 450px;
height: 169px;
display: block;
float: left;
}

.custom .teaser {
width: 100%;
margin-top: 2em;
padding-top: 2em;
border-top: 1px dotted #bbb;
text-align: justify;
}
.custom .teasers_box {
padding-top: 0;
padding-bottom:0;
border-top: 0;
}

.custom #header { height:150px; background:transparent url(images/header.png) center no-repeat; } 



 <?php
/* ---:[ place your custom code below this line ]:---*/

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
remove_action('thesis_hook_footer', 'thesis_attribution');

?>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The nav bar:

    Your float:left; property in:

    .custom #header #logo a { text-indent: -9999px; width: 450px; height: 169px; display: block; **float: left;** }

    is causing the nav bar to act all funny. You have 2 options:

    1. get rid of the float left.
    2. clear your float left after the logo.

    IE: add clear:left; or clear:both; to your .menu-custom-container

    The Image:

    It seems its unable to find header.png in

    wp-content/themes/thesis_184/custom/images/header.png

    Also it looks like you have uploaded the header image into the theme.

    could this be it? http://euanmitchell.com.au/wp-content/uploads/2012/05/euanbannerv6.jpg

    if that’s the case you can completely get rid of the background-image and split the remaining properties into individual properties since #header contains this code:

    background-image: url(http://euanmitchell.com.au/wp-content/uploads/2012/05/euanbannerv6.jpg);

    so your new css would be:

    .custom #header { height:150px; background-color:transparent; background-position: center; background-repeat:no-repeat; }

    That will take care of the image not showing up.

    Edit:

    Also you don’t need the no-repeat because it also in the #header or the transparent color because it’s white anyway. TBH they don’t add anything, the only real property your adding is background-position:center;.