Support » Themes and Templates » Changing TwentyTwelve Header to Text on Mobile

  • Hey, everyone!

    I am using Twenty Twelve – child theme – and have a header image for the larger versions, but when it switches to mobile I am wanting either a small image or just text – instead of the large header being shrunken down. Any idea how to do this? I am still fairly new with coding, but have searched extensively and haven’t quite found a solution for this. Basically, I want the default text only header to only show when minimized to a mobile device.

    Thank you greatly in advance for any help!
    Have a good day,

Viewing 2 replies - 1 through 2 (of 2 total)
  • paulwpxp


    Font hero

    Use this in child theme’s stylesheet or Custom CSS plugin.

    Change those 2 text to yours. These texts will replace the header image when in small screen ( 600px same as theme’s break point ).

    @media screen and (max-width: 600px) {
    	#masthead > a img {
    		display: none;
    	#masthead > a:before {
    		content: "Hello world !";
    		font-size: 24px;
    		line-height: 1.8;
    		color: black;
    	#masthead > a:after {
    		content: "Just another hello world !";
    		display: block;
    		font-size: 12px;
    		color: grey;
    	#masthead > a {
    		display: block;
    		margin: 24px 0 0;
    		text-align: center;
    		text-decoration: none;

    Worked perfectly! Thank you so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing TwentyTwelve Header to Text on Mobile’ is closed to new replies.