Viewing 15 replies - 16 through 30 (of 32 total)
  • 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(https://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*/
    }

    thanks batharoy, will try this out.

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

    thank you

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

    Goes in the css file.

    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!

    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?

    Thread Starter tommee81

    (@tommee81)

    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: 355×40 -I hope it helps. I has to work with everybody.

    Thread Starter tommee81

    (@tommee81)

    it worked!!! I followed tommee’s code. ?? 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!

    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? ??

    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.

    Thread Starter tommee81

    (@tommee81)

    Good Job!

    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!

    tommee81 please help what you did that you logo in one line with menu https://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 ??

    @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.

    [Insults redacted]

    tommee81 this code:

    header.php
    <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>

    style.css

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

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘Adding Logo to Twenty fourteen’ is closed to new replies.