WordPress.com

1. adeleloria
   Member
   May 26, 2012, 9:25 PM

   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.

2. thesacredpath
   Member
   May 27, 2012, 7:06 AM

   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;
   }

3. adeleloria
   Member
   May 28, 2012, 9:39 PM

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

4. designsimply
   Staff
   May 29, 2012, 1:27 PM

   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;
   	}
   }

Topic Closed

This topic has been closed to new replies.