Adding logo, searchbox, facebook button on header of twentyeleven

  • How can I add logo in the site name and description part of the header in twenty eleven theme? I want to hide/remove site description and add logo instead. Please specify css properties.

    Search box appears on top right side of the page… when I increase my computer’s resolution the search box appears out of the main div.. I want to place it on the right side and on the top of navigation.
    What should do to remove increasing and decreasing of width effect of the search box?

    How can I add facebook button(button image) on the top right side without creating buggy theme? What should I add on the header and css?

    as my site is running locally, this image might be helpful in understanding
    https://picturepush.com/public/9015457

    p.s. I am using child theme. I have moved navigation to the top of the header image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter neronix

    (@neronix)

    Okay I played around css of searchform changed to these values:
    Everything seems ok for now. Need to check on different monitor resolution (other than 1024×768).

    #branding #searchform {
	position: absolute;
	top: 10em; /* <--this value */
	right: 7.6%;
	text-align: right;
}

#branding #searchform div {
	margin: 0;
}
#branding #s {
	float: right;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 200px; /* <--this value */
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 200px; /* <--this value */
}

    solution for other problems still trying to figure out

    could you help me with this as well? How do I add a logo instead of the title??

    Use element inspect tool by pressing F12 then inspect the place your mouse and click on the title of your site, you will see the generated html, from there you would know the exact text you will need to change in your header.php file.

    Open the header.php file and search for the text replace all the text between the <div> tag with the url of the logo you want. i.e you must have uploaded the logo then just copy the logo url and paste it there.

    Try it

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding logo, searchbox, facebook button on header of twentyeleven’ is closed to new replies.