Reposition Site Title (responsively)

• 

  thewilliamaj · Member · Dec 22, 2015 at 12:04 am

  • Copy link
  • Add topic to favorites

  I need to reposition the site title, “Tube Matters”, so that it is in line, and to the right of, the site logo, and not beneath it. The site tagline should then sit to the right of the site title. Crucially, it must be responsive, so that the title doesn’t disappear off the screen in the mobile version.

  The website is: tubematters.com

  Thanks for your help.

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

• 

  lindamork · Staff · Dec 22, 2015 at 8:49 pm

  • Copy link

  Hi there,

  If you’d like your logo and site title to appear together you might consider creating a new Site Logo that includes your title and perhaps your tagline as well.

  If you choose to do this, you can uncheck the box in Customizer >> Site Title >> Display Header Text so that your Site title and Tagline won’t display as they do now.

  Here’s some more info about the Site Logo that’s included with your Cubic Theme:

  Add a Logo to Your Website

  Cheers!

• 

  thewilliamaj · Member · Dec 24, 2015 at 4:54 pm

  • Copy link

  Thanks. I might try that as a last resort – I’m afraid it doesn’t give me as much flexibility as I’d like. Do you know how to do it in CSS?

• 

  ogurel · Member · Dec 26, 2015 at 8:00 am

  • Copy link

  Hi there,

  If you follow @lindamork’s suggestion and create a new site logo that includes your logo, title and even your tagline, you can make sure it does not break the responsive layouts by using and tweaking the following CSS code:

  @media screen and (max-width: 900px)
  {
      .site-branding img
      {
          max-width: 120px !important;
      }
  }

  The max-width: 900px means that for browser window resolutions that are 900px and below the code inside the brackets will be used.

  As an example, I have set the image(s) that are under the class site-branding to have a maximum width of 120 pixels.

  By tweaking these values you can ensure that your logo shows correctly no matter which resolution your visitors use.

  If you need further assistance or clarification, please reply.

  Take care and Happy Holidays,

  Onur