Moving site title under header in Twenty Eleven

  • Author
    Posts
  • #898980

    adeleloria
    Member

    Is there a way to display the site title underneath the header image in Twenty Eleven? Because the “brand” title, First Five Years, is in the header image, I’d like the site title, which is longer and more descriptive, to come after that and before the global navigation.

    Here’s the site, in case that’s helpful: http://firstfiveyrs.wordpress.com/

    The blog I need help with is firstfiveyrs.wordpress.com.

    #899186

    This is a little bit of a problematic thing to do on the twenty eleven theme due to the responsive design that adjusts everything for browser window width. Add this to your CSS and then narrow your browser way down to about smart phone width and see what happens to your relocated site title. This occurs because we have to use position absolute to move it down below the header image and that means it loses its “relationship” with the other elements of the page.

    #branding {
    height: 380px;
    }
    
    #branding hgroup {
    bottom: 0;
    margin: 0 4.6%;
    position: absolute;
    }
    
    #access {
    margin-top: 55px;
    }
    
    #site-title {
    margin-right: 0;
    }
    
    #branding #s {
    display: none;
    }
    #899294

    adeleloria
    Member

    Hmm, ok, thank you for the info! I guess I’ll look into finding another theme.

    #899299

    There are probably several different ways you could try to resolve this. Here is another attempt which uses media queries to try to keep the responsive design part of the theme in check:

    #branding > a {
    	display: block;
    	position: absolute;
    	top: 0;
    }
    #branding a img {
    	width: 100%;
    }
    #branding hgroup,
    #branding #searchform {
    	padding-top: 290px;
    }
    @media (max-width: 650px) {
    	#branding hgroup,
    	#branding #searchform {
    		padding-top: 187px;
    	}
    }
    @media (max-width: 480px) {
    	#branding hgroup,
    	#branding #searchform {
    		padding-top: 138px;
    	}
    }

The topic ‘Moving site title under header in Twenty Eleven’ is closed to new replies.