Set an image by link, as a logo, in the center of the home, below the bar

  • After sticking logo and search bar, I would like to set the middle of the home (at the top, below the horizontal red bar) … a title extrapolated from a link image. I used this your code, but it does not work. No image comes out.

    .masthead .site-logo-link {
    display: block;
    background: url(‘’) no-repeat center center;
    width: 100%;
    height: 100px;
    background-size: contain;
    margin-right: 0;

    The blog I need help with is: (visible only to logged in users)

  • *Afer remove logo and search bar

  • Looks like you worked this out?

  • No, I did not solve it. But I managed to display the logo and in the middle. I have encountered other problems: the image is too small. I also noticed that by arranging the image well on the site, it ruins / fails / breaks and is positioned badly on the mobile version.
    I’ll give you some data so you can help me
    a) This is the medium-small size logo:
    b) This is the medium-sized logo (I prefer this, it’s the one set up, but maybe it’s too big):
    c) These are the css that I use: (you place them so we save time on where to intervene)

    1) I would like to enlarge the logo a little (always placed in the center), because the original logo is bigger, but with the css code that I have … the logo is reduced. But … if I enlarge the logo, then you create too much space below, too much empty space between the logo and the slider. Can you also avoid creating too much space?

    2) Fixed the problem, the logo must also be displayed well on mobile devices,
    because I noticed that if I fix on the wer …. it ruins / spoils / breaks, because either the position is bad, or the size is wrong, or even the logo is displayed cut (half logo). So if you can help me, as well as on the web, even for mobile.

    Thanks again, you are my salvation. I’m not a webmaster, I’m creating the site by myself. Excuse me for the trouble and excuse me for any wrong translation.

  • Maybe I wrote too much and badly, and you understand nothing. I would like the final result to be like this (I modified the image with Paint). Position, logo size and equal space:

    But check also the mobile version (phone)

  • Currently you have this:

    .masthead .branding {
    width: 493px !important;
    margin: 0 auto!important;
    float: none !important;

    I would change it to:

    .masthead .branding {
    width: 100%;

    You can then add background-position: center; to .masthead .site-logo-link.

    To make the logo bigger you can increase the height of .masthead .site-logo-link.

  • Thank you :) Everything works, even from phone and tablet you can see the logo well.

    One last domada: I accidentally removed the search box (the one on the right side). What is the css to add the search box again? Thank you

  • You can show the search with:

    .masthead .search-wrapper {
    display: block;
  • The topic ‘Set an image by link, as a logo, in the center of the home, below the bar’ is closed to new replies.