[Theme: Eyesite] – Trouble getting image in header positioned correctly

  • Resolved Mark

    (@markyork)


    9 years, 2 months ago

    I added an image to the header of a site that I am building, using the Eyesite theme. I’m having a lot of trouble getting the CSS just how I want it, though.

    I’ve set up a child theme and that all works fine, customizing my own style.css. I just need some help with the CSS itself.

    Specifically, I can’t remove a small space below the image, which is allowing the blue background of the header to show. I’ve set the <a> and <img> tags and the containing div.site-logo all to height: 100%, thinking that would set it to the full height of the header, but it’s not.

    Also, I can’t get the nav menu (header nav#site-navigation) to be at the bottom of the header area. I tried vertical-align: bottom, but that didn’t work and I’m not sure what else to try for that.

    The site is here.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Can be done simply by using absolute and specifying a height for your image. Add the following code to the bottom of your CSS file, no need to amend any values as CSS executes in order, since this will be at the end it will become the default.

    #page header div.site-logo a, #page header div.site-logo a img {
    height: 281px;
}

#page .main-navigation {
    position: absolute;
    bottom: 0.5rem;
    right: 0;
}
    Thread Starter Mark

    (@markyork)

    Hi, Simon. Thanks for the reply. I had the img height set to 100%, so I just changed that to 281px. That worked fine.

    I pasted the nav CSS to the bottom of the file, but unfortunately that didn’t move the menu to the bottom of the header, as desired.

    Perhaps I have some other code above that affecting it?

    Yep, sadly the top: 0 has been inherited since this value has not be over-written. Replace the code I have you with this:

    #page header div.site-logo a, #page header div.site-logo a img {
  height: 281px;
}

#page .main-navigation {
  position: absolute;
  bottom: 0.5rem;
  right: 0;
  top: auto;
}

    Thread Starter Mark

    (@markyork)

    That did the trick. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Eyesite] – Trouble getting image in header positioned correctly’ is closed to new replies.