Center and hide different size logo depending on Screen

  • Resolved unitrip

    (@unitrip)


    8 years, 6 months ago

    Hello Ben,

    first of all, thanks a lot for Tracks CSS Snippets, it’s so helpfull ! I’ve seen your talking already about the logo with different size depending on screen, i’m wondering if you have a solution to my problem. The below CSS Code works perfectly but i’m just needing to center the logo. Any solution?

    .logo {
    display: none;
    }
    .site-title a {
    display: block;
    background-image: url(https://image.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    }
    @media all and (min-width: 600px) {

    .site-title a {
    background-image: url(https://image.jpg);
    width: 100px;
    height: 100px;
    }
    }

    Also with this code, Logo and tagline aren’t hidden when mobile menu open. which is kind of disturbing. Could we avoid that by playing with opacity ?

    Furthermore, like i didn’t find the forum, how it’s possible to hide meta data ?

    Last thing, does it possible to center “verticaly” the tag line ? To try to put the Tagline at same level as the Logo ?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Awesome, I’m glad you’ve found it useful!

    You can use this CSS to center the logo on the screen:

    .site-title {
  display: inline-block;
}
.title-info {
  display: block;
  float: none;
  text-align: center;
}

    And the following CSS will hide the logo and tagline when the mobile menu is open:

    .site-header.toggled .title-info,
.site-header.toggled .site-description {
  display: none;
}

    For hiding the meta data, this can be done with the “Post Meta” section in the Customizer. There’s an option for showing/hiding the date, author, and category there.

    Lastly, for vertically centering the tagline, I may need to check it out live on your site, but give this a shot first:

    @media all and (min-width: 800px) {

  .site-description {
    left: 50% !important;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
    Thread Starter unitrip

    (@unitrip)

    Thanks a lot. You react so quick! Everything is working except vertically center (but I don’t need it anymore as logo is on center now).

    Concerning Meta data, I wasn’t speaking about Post Meta (Above Excerpt and above post) but after all post, below searching tools, it’s written META (connexion, RSS…). I would like to hide this. Do you think it’s possible ?

    Theme Author Ben Sibley

    (@bensibley)

    No problem!

    I see what you mean now. Those are widgets that WordPress includes by default when you activate Tracks. In the widgets menu (Appearance > Widgets), you will find them under the “After Post Content” section. You can remove them from there, and then they will no longer show on the site.

    Thread Starter unitrip

    (@unitrip)

    Great. Thanks a lot.

    I’m still having an issue but i will create a new post to help other too.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Center and hide different size logo depending on Screen’ is closed to new replies.