Move header image below the menu tab on Sela theme

  • Unknown's avatar
    itssolovelywhenitssunny · Member ·

    I’m very new to WordPress and CSS and I’m trying to move the header image below the Menu tab. I believe I saw where it says “before” in the code but I would appreciate it if anyone can advise what to do next. I tried a few things but it doesn’t seem to work for me. Thanks!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we can do this with the following CSS, but first the caveat. Safari, Chrome, Opera and Firefox have supported this CSS for quite a while, but Internet Explorer is sort of slow in supporting CSS3 standards, so this will not work on IE10 or before, only on 11+. 

    .site-header {
  display: flex;
  width: 100% !important;
  flex-direction: column;
  max-width: 100% !important;
}
.site-branding, .main-navigation {
  width: 100%;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.site-branding {
  order: 2;
}
.site-navigation {
  order: 1;
}
#page {
  box-sizing: border-box;
}

    There is another way to do this, but it is messy and requires a good bit of code to have it work properly on responsive width themes such as Sela.

  • The topic ‘Move header image below the menu tab on Sela theme’ is closed to new replies.