Adding logo, searchbox, facebook button on header of twentyeleven (4 posts)

  1. neronix
    Posted 3 years ago #

    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

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

  2. neronix
    Posted 3 years ago #

    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 1024x768).

    #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

  3. sgazeri
    Posted 3 years ago #

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

  4. cyrusolu
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic