Why is header image in Edin theme appearing above my logo instead of underneath?

• 

  hicc2014 · Member · Sep 2, 2014 at 2:27 pm

  • Copy link
  • Add topic to favorites

  Hi, I am trying to customize the Edin theme template. My first problem is that I cannot get my site logo to appear above the custom header image…it is appearing below. How do I correct this?

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

• 

  sandymcfadden · Member · Sep 2, 2014 at 10:22 pm

  • Copy link

  Hi hicc2014,

  I see that you might have removed your header image so I’m not sure if you’re still looking how to do this or not.

  If you are I think this code would give you a good start. You would need to adjust the top and margin-top numbers to match the size of your logo and header image though.

  .header-image {
    margin-top: 150px;
  }
  
  .header-wrapper {
      position: relative;
  }
  
  .site-branding {
      position: absolute;
      top: -280px;
  }

  Let me know if this helps or if you have questions about it.

• 

  hicc2014 · Member · Sep 3, 2014 at 12:16 am

  • Copy link

  I’m assuming i need to upgrade so that i can edit the CSS…?

• 

  sandymcfadden · Member · Sep 3, 2014 at 12:20 am

  • Copy link

  Oh sorry yes. In order to do most customization you would need to have that upgrade.

  Without the upgrade you can edit some things in the customizer but to have more control over the way things look you would need to upgrade.

• 

  lizthefair · Member · Sep 3, 2014 at 12:28 am

  • Copy link

  I’m pretty sure the default in Edin is for the logo to appear above the image–it goes where the site title shows up in the demo http://edindemo.wordpress.com/. It looks like your whole image is showing above the header bar which makes me think there is a problem with your image that we should be able to fix without CSS.

  Could you try removing your image from wherever you placed it, and instead make it the “featured image” for your home page–which you also want to make sure is using the “front page template”

  I think that will help. If we get stuck, or I’m wrong about how the theme renders normally, Sandy’s excellent CSS will come in handy.

• 

  sandymcfadden · Member · Sep 3, 2014 at 12:42 am

  • Copy link

  @lizthefair is exactly right, if you’re looking to have it setup like the demo than you don’t want to set the header image in the customizer and don’t need to add any custom css.

• 

  hicc2014 · Member · Sep 3, 2014 at 1:33 am

  • Copy link

  upgraded to custom design and the CSS fixed it…hmmm…now i’m trying to figure out how to customize the color of the primary menu…

• 

  sandymcfadden · Member · Sep 3, 2014 at 9:26 am

  • Copy link

  Excellent I’m glad that worked for you!

  You can modify the colors of the primary menu with this css code. Adjust the colors to what ever you would like of course.

  #menu-primary-menu .menu-item {
      background-color: #1279be;
      color: #fff;
  }
  #menu-primary-menu .menu-item a:hover,
  #menu-primary-menu .current-menu-item a {
      background-color: #fff;
      color: #000;
  }

  Let me know if that helps.

• 

  hicc2014 · Member · Sep 3, 2014 at 5:15 pm

  • Copy link

  Thanks so perfect…now don’t slap me lol..but why in the world is my secondary menu and search button in my header image…is their a repository of CSS code headers?

• 

  sandymcfadden · Member · Sep 3, 2014 at 6:43 pm

  • Copy link

  No problem. This css code is just me playing with things and trying to get them to fit and look right.

  I believe this makes things look fairly good, but give it a try in the preview and let me know what you think.

  .secondary-navigation {
    position: relative;
    top: -340px;
    background-color: transparent !important;
  }
  
  #site-search {
    position: absolute;
    top: -470px;
    right: 0;
  }
  
  .search-wrapper {
    position: relative;
    top: -410px !important;
    background-color: transparent;
  }

• 

  sandymcfadden · Member · Sep 3, 2014 at 6:46 pm

  • Copy link

  The more I play with it I think it will need more tweaking, especially when it gets to smaller screen sizes than I tested on.

  I’ll have a look later on and see what I can come up with.

• 

  sandymcfadden · Member · Sep 3, 2014 at 11:28 pm

  • Copy link

  I’ve been playing with the css for a while now and I think you might be better off using some of the other theme options and page templates with featured images instead of using header images.

  I’ve come up with a bunch of css code that will get things looking pretty good on a large screen, but it’s going to take a lot of work to have it act well responsively down to smaller screens.

  Let me know what you think.

• 

  hicc2014 · Member · Sep 4, 2014 at 3:09 am

  • Copy link

  That actually works great…and so far the responsive design is in tact…

• 

  sandymcfadden · Member · Sep 4, 2014 at 5:39 pm

  • Copy link

  Oh good, glad it’s working.