Support » Theme: First » How can I hide the logo in desktop view only?

  • Resolved themebreaker

    (@themebreaker)


    Hi there.
    I love how my logo – a simple image that doesn’t replace the title – looks in tablet and mobile resolution in FIRST, when the title and site description center and the logo pops above them, but I would prefer not to have it showing up in desktop views. So, two connected questions:

    Is it possible to have the logo activated ONLY in tablet and mobile views, the width where, currently, the logo centers itself and goes above the title?

    If not, how can I hide the logo in desktop view only, without affecting how it shows up in responsive mode?

    I’ve tried various suggestions from tutorials and forums for hiding logos, but all have failed and I really don’t want to break FIRST.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Takao Utsumi

    (@utsumit)

    To hide the logo in desktop view, please use the following code.

    @media screen and (min-width: 980px) {
      .site-logo {
        display: none;
      }
    }

    First of all, THANK YOU! I never take any of your responses for granted and they are always appreciated. I don’t think there can be many professional theme developers out there who are this kind and helpful to an enthusiastic beginner.

    This is SO exciting yet frustrating at the same time. I tried the code in FIRST, in Additional CSS, Custom CSS and directly in the Stylesheet in the editor, in several places related to site-logo, but it didn’t work. But I know your code always works, so I then tried it in WRITE and free GRAPHY, in the Additional CSS and it worked PERFECTLY first time!

    The only changes I made directly in the editor of FIRST (before I found the forum and realised what the Custom CSS function does) were to move the sidebar from right to left and to replace the black pagination with WRITE’s pale grey pagination.

    I’ve deleted the cache, tried replacing the title with the logo, tried it with both navigation menus in place, a boxed and wide layout and with a centered logo and left aligned logo.

    I have tried temporarily removing ALL the code I’ve added to FIRST’s Custom CSS and Additional CSS in case any of those changes affected how this piece of code works in FIRST, but it still doesn’t work. Any ideas? I am so close to being able to go live with this theme and start blogging again. I’ve got maintenance mode on while I’m learning all this.

    Hi again. I kept experimenting with the code you sent, seeing if the media screen and (min-width 980px) bit worked with various combinations of .site-logo, .site-title .header-side and .site.top. etc. I also changed the px width to 960px. Eventually, this seemed to work but I’m scared it might cause issues cause I really don’t understand why it’s worked!

    @media screen and (min-width: 960px) {
    .site-header .site-logo {
    display: none;
    }
    }
    

    Do you think this is OK? Will it cause any issues?

    Theme Author Takao Utsumi

    (@utsumit)

    Sorry, I made a mistake. Your code is right!
    I’m sorry for bothering you.

    Absolutely no need to aplogise, certainly not for bothering me – you never could! So many people must benefit from you generously sharing your expertise here in the forum. Because you sent the code, I knew the logo-hiding was possible and so I was determined to figure out what I’d done wrong. That’s how I got to the solution in the end: determination, luck and feeling I had your support. I owe you so much, and some day will send you the link to my simple site when it’s up and running. I’m 58 years old and I genuinely have no knowledge of coding. Everything I learn, I learn from becoming familar with the stylesheets of your themes, looking at the source code of other themes, learning from online ‘schools’ and asking people for help. I’m a linguist and translator, so I like spotting patterns. I’m also a mum, so I know how important it is to learn by doing and to learn from mistakes.
    Best wishes.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I hide the logo in desktop view only?’ is closed to new replies.