Moving header image above site title

• 

  roxanebeyns · Member · Jul 17, 2017 at 10:14 pm

  • Copy link
  • Add topic to favorites

  Hey everyone,

  I just suscribed to the premium plan and I do now have CSS editing possibilities. I would like to move my header image above my site title (as it was the case in the previous version of my button 2 theme!). I have been trying for hours now… Can someone help me with a CSS code?

  Thanks a lot!
  Roxane

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

• 

  garysixtyeight · Member · Jul 17, 2017 at 11:43 pm

  • Copy link

  Hi Roxane,

  Please try adding the below to your site in My Sites > Customize > CSS.

  .site {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
  }
  
  .site-header {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
  }
  
  #site-navigation {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3;
  }
  
  .site-content {
      -webkit-box-ordinal-group: 5;
          -ms-flex-order: 4;
              order: 4;
  }
  
  .site-footer {
      -webkit-box-ordinal-group: 6;
          -ms-flex-order: 5;
              order: 5;
  }

  The CSS works for me in Chrome when I add it (screenshot). If it doesn’t work for you, please keep it in the customizer so that I try troubleshooting it.

  Please note: the CSS may not work in some older browsers, but it should be fine for most visitors:

  https://caniuse.com/#search=flexbox

• 

  roxanebeyns · Member · Jul 18, 2017 at 5:46 am

  • Copy link

  Due to some miracle, it works!
  Thank you Gary!
  Now that I suscribed to the Premium Plan to fix this, I would like to take advantage from it. Do you know a website with some advices about it? I don’t know anything about CSS but I’m used to other programmation softwares (R, for example).

  Have a nice day!

• 

  roxanebeyns · Member · Jul 18, 2017 at 6:28 am

  • Copy link

  I thought it worked but it is in fact moving the blog content right on the page (i’m using Chrome). I let it that way so that you can see what i mean. Do you have and idea how to fix this?

• 

  garysixtyeight · Member · Jul 18, 2017 at 9:31 am

  • Copy link

  Can you double check that the exact css I posted has been pasted into My Sites > Customize > CSS?

  When I check the custom css file, some of the css appears to be missing (or WP is stripping it out).

  If all of the css is there, please try adding this to it:

  .site {
      display: flex !important;
  }

• 

  roxanebeyns · Member · Jul 18, 2017 at 5:11 pm

  • Copy link

  It worked by adding this! Thanks a lot!

• 

  garysixtyeight · Member · Jul 18, 2017 at 5:19 pm

  • Copy link

  w00t!

  You’re welcome, glad I could help :)