WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[closed] Adding Logo to Twenty fourteen (33 posts)

  1. tommee81
    Member
    Posted 8 months ago #

    How do i add a Logo to Twenty fourteen? Thanks!

  2. JohnWilbanks
    Member
    Posted 8 months ago #

    Look under appearance-header. Add your logo there. You might have to be creative because it will take up the entire header area. I just created several different headers with my logo on it...

    You can check it out at http://www.dccollectors.com

  3. tommee81
    Member
    Posted 8 months ago #

    Thanks John, but I do not use header. I just want to add my logo without header.

  4. jeffqc
    Member
    Posted 8 months ago #

    You should check or uncheck

    Header Text Show header text with your image.

    in appearance > header section

  5. tommee81
    Member
    Posted 8 months ago #

    I do not have a header image, I just want to add one small custom logo 335x40px to the place of the header text.

  6. jeffqc
    Member
    Posted 8 months ago #

    in appearance > header section

    upload your logo there then chose the one you want here:

    Uploaded Images
    You can choose one of your previously uploaded headers, or show a random one.

  7. Knocks
    Member
    Posted 8 months ago #

    "appearance > header"

    There is no such section.

  8. Jabzebedwa
    Member
    Posted 8 months ago #

    Knocks,I just installed the theme. I've got the Appearance > Header section. Go to Dashboard, then Appearance. You'll see "Header" under there. If not, please detail out your click-path and what you see.

  9. tommee81
    Member
    Posted 8 months ago #

    Of course I know how to add header immage to the site, but I just sad 2 times I do not need one. I do not use header. I just want to change the name of the site to a small logo 335x40px at the same place.

  10. batharoy
    Member
    Posted 8 months ago #

    One way of doing it: I reccomend a child theme.
    Not pretty, perhaps a PHP person can elaborate or come up with something cleaner.

    Search your header.php file for this section

    <header id="masthead" class="site-header" role="banner">
    		<div class="header-main">
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

    you need to remove this part

    <?php bloginfo( 'name' ); ?>

    and replace it with a coded image link

    <img src="YOUR IMAGE LINK HERE">

  11. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    EDIT - I see you modified your post to add the child theme piece - thanks.

    Any modification like the above should be done in a child theme -

    http://codex.wordpress.org/Child_Themes

  12. tommee81
    Member
    Posted 8 months ago #

    Oh, this is nice batharoy, thanks. I just made something like that. Ja, I removed the <?php bloginfo( 'name' ); ?> part, add a small extra part, and this is wat I have now:

    <h1 class="site-title">" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="THE NAME OF MY SITE" /></h1>

    It works, but can it be beter done? Any ideaas? Professionals? Ja of course, I did this in child.

    In css I made the logo responsible, so it is getting smaller on Iphone:
    img#site-logo {
    max-width: 100%;
    height: auto;
    }

  13. Jas999
    Member
    Posted 7 months ago #

    Solutions do not work properly, at least for me (WP3.8, Windows 8.1, WAMP, localhost):
    1- I tried tommee81's solution: does not show the logo, just showing " rel="home"> followed by the alt text I inputted (like THE NAME OF MY SITE).
    2- I tried batharoy's solution: logo appears but the top menu dissapears as the user scrolls down. The menu does not stick to the top of the page after the header image dissapears with scrolling.
    => Anyone knows how to have the logo appear while keeping the top menu from dissapearing during scrolling? Thanks!

  14. tommee81
    Member
    Posted 7 months ago #

    Hi Jas999,

    Try this in header:
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="THE NAME OF YOUR SITE" /></a></h1>
    I did not use the CODE button in my last post, so it changed it. Now this is appearing goed. You need to put your logo to: ..child/images/site-logo.png
    If you do it like this, the menu stays always, with your logo.

  15. Jas999
    Member
    Posted 7 months ago #

    Thanks Tommee81. I copied your code in header.php in the child theme (replacing the <h1 code after <div class="header-main">), relocated my logo under the child theme/images folder. Nope, the menu is still not fixed. Yes, the menu stays at the right of the logo, but when I scroll down since the menu is not fixed, it dissapears as I scroll down.

  16. Trisha.Blogs
    Member
    Posted 7 months ago #

    Agree with Jas999, I am facing the same problem. The logo and the menu on the right disappears when I scroll down my website.

    Before, when using site title instead of logo, the menu will always stay at the top even if we scroll down.

    Any suggestions to fix this?

    thanks

  17. batharoy
    Member
    Posted 7 months ago #

    I think I have a purely CSS fix for this now. It does require a site title. Site description is optional.
    Image showing results.

    .site-title {
        background-repeat: no-repeat;
        background-image: url(http://www.mouserunner.com/images/Yellow1_2.png);
        background-size: contain;
        line-height: 80px;     /*Orininal height was 48px*/
        font-size: 65px;     /*Adjust font size so full image is clickable*/
    }
    .site-title a {
        color: transparent;     /*Title text invisible*/
    }
    .site-title a:hover {
        color: transparent;     /*Title text invisible on hover*/
    }
    #primary-navigation {
        margin-top: 32px;     /*New site tile height minus original to line up at the bottom of header*/
    }
    .search-toggle {
        margin-top: 32px;     /*New site tile height minus original to line up at the bottom of header*/
    }
  18. Trisha.Blogs
    Member
    Posted 7 months ago #

    thanks batharoy, will try this out.

    Where do I paste this code? in my child style.css or my child header.php?

    thank you

  19. batharoy
    Member
    Posted 7 months ago #

    Where do I paste this code? in my child style.css or my child header.php?

    Goes in the css file.

  20. Trisha.Blogs
    Member
    Posted 7 months ago #

    hahaha. thanks batharoy.

    I still got the same results as before, top navigation bar & logo disappears when scrolling down. But it is working for your image.

    thanks for your help though, really appreciate it!

  21. batharoy
    Member
    Posted 7 months ago #

    Interesting, on my install the header stays in place like it should. You can see in the screenshot I was scrolled down the page.
    Did you revert any PHP edits done earlier in this post?

  22. tommee81
    Member
    Posted 7 months ago #

    I am not sure, why it does not work with you guys. So, I sad wat I changed in my header.php, it can be maybee my style.css or the size of the logo. This is what I have in my style.css:

    img#site-logo {
    	max-width: 100%;
    	height: auto;
    }
    .search-toggle {
    display: none;
    }

    And the size of my logo is: 355x40 -I hope it helps. I has to work with everybody.

  23. tommee81
    Member
    Posted 7 months ago #

  24. Trisha.Blogs
    Member
    Posted 7 months ago #

    it worked!!! I followed tommee's code. :D Thank you both (batharoy and tommee).

    Earlier on tommee's code didn't work because I didnt notice that the image had to be in twenty fourteen child's theme (my bad!). I adjusted his code a bit so that the image can be in any location:
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img id="site-logo" src="/images/site-logo.png" alt="THE NAME OF YOUR SITE" /></a></h1>

    I did not need to add this into style.css because it already worked without it

    img#site-logo {
    	max-width: 100%;
    	height: auto;
    }
    .search-toggle {
    display: none;
    }

    Thank you guys!

  25. Jas999
    Member
    Posted 7 months ago #

    Although both solutions (header.php and purely css) do show the logo, nope, still does not work for me... grrrrr. I tried it on localhost and on a live web: the menu does not "stick" to the top. Am I the only one with that problem? My WP3.8 install is in French, could that be the problem? :-(

  26. Jas999
    Member
    Posted 7 months ago #

    It WORKS! For the header.php solution, the image has to be in height 44px or less (I use a jpg image, not a png); 44px and under, menu is fixed, 45px and above, the menu is not fixed when a user scrolls.
    I have not retested the purely css solution with different image size to check if if works.

  27. tommee81
    Member
    Posted 7 months ago #

    Good Job!

  28. Jas999
    Member
    Posted 7 months ago #

    I tried the css solution: might need a bit of tweeking because the menu is not fixed.
    I think this post can be put to RESOLVED since the header.php solution in a child theme works well.
    Thanks to all!

  29. wphelp77
    Member
    Posted 6 months ago #

    tommee81 please help what you did that you logo in one line with menu http://toldi.nl
    what code i should to add in header.php and style.css
    P.S i have bad english so i cant understantd all posts here :(

  30. esmi
    Forum Moderator
    Posted 6 months ago #

    @wphelp77: If you require assistance then, as per the Forum Welcome, please post your own topic. Alternatively, use a WP support forum in your language.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic