Align Site-logo left to Site-title

• 

  jeanettd · Member · Apr 14, 2021 at 12:23 pm

  • Copy link
  • Add topic to favorites

  Hello :)

  I need some help to move my logo down to the line to my site title.

  I see many people have asked the same questions, but ive tried all the snippets, and nothing work. The logo will not move.

  This site: http://www.gokstadstudentene.no
  Logo: studenthat
  Sitetitle: Gokstadstudentene

  Ive tried different things in the Additional CSS, but nothing works.

  Thank you:)

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

• 

  a18s · Member · Apr 14, 2021 at 3:21 pm

  • Copy link

  @jeanettd Hi there,

  I need some help to move my logo down to the line to my site title

  Would adding the two in one-and-the-same-graphic be an option instead?

  By the way, could you also verify the theme you currently are using?
  From the source code I can read it is the one named “Varia” but it is a parent of various themes:
  https://wordpress.com/theme/varia

  Hope this helps!

• 

  jeanettd · Member · Apr 14, 2021 at 3:55 pm

  • Copy link

  Hello :)

  If i make a graphic including the logo and the title it will come over the menu-frame , and its not looking good. I tried it already:)
  And then the tagline is way down under.

  The theme the site are using is Hever.

  :)

• 

  aleone89 · Staff · Apr 15, 2021 at 11:06 am

  • Copy link

  Hello there,

  It looks like the site is on the business plan, which means you can get 1:1 support via live chat or email.

  This support can be reached here: https://wordpress.com/help/contact

  My advice would be to reach out there to see if we can provide that CSS to make that possible, as it looks like this might require a bit of time to accomplish.

  I hope this helps.

• 

  jeanettd · Member · Apr 16, 2021 at 9:43 am

  • Copy link

  Hello!

  Ah, i see. Okey, i will try to get some help from the support channel :)
  Thank you!

• 

  staff-mckluskey · Staff · Apr 16, 2021 at 11:00 am

  • Copy link

  You can also try out this piece of code:

  /* Move logo next to title */
   
  @media screen and (min-width: 560px) {  
      .site-header {
          grid-template-areas: 
              "site-logo site-title main-navigation"
              "site-logo site-description social-navigation";
          grid-template-columns: 150px 1fr 2fr;
      }
      .site-header .site-title,   
      .site-header .main-navigation {
          align-self: end;
      }
      .site-header .site-logo {
          margin-bottom: 0;
      }
  }

  I hope that helps :)