Header image not consistent across browsers

  • Resolved reust89

    (@reust89)


    9 years, 6 months ago

    Recently changed to Huemen from another theme, and am loving it. Having a problem that other threads have addressed, but not completely resolving the issue.

    As per another thread, I have attempted to add a header image so that it spans the length of the header bar. The code I used was:

    /* make image responsive */
.site-title img {
  width: 100%;
  height: auto !important;
  max-height: 400px !important;
}
/* remove padding to fit image in header */
#header .pad, .site-title {
  padding: 0 !important;
}

    This works beautifully in Google Chrome (website is The Heady Vermonter), but not so well in IE and Mozilla. In Mozilla, the image only makes it to the middle of the page. In IE, this is true as well, but also the header menu becomes vertical instead of horizontal.

    I don’t know too much about coding, but I installed the custom CSS plug-in to input that previous code, and am comfortable at that level. Thanks!

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

  • Hi reust89. Welcome to the Hueman forum.

    Try this in your custom css for the header image:

    .site-title {
    float: none;
}

    The default theme menu is set to horizontal by applying “list-style:none;”. Only thing I could find on the IE menu is this:

    It’s a bug in ie 10 and 11. list-style: none doesn’t get applied if the list also has styles display: none in an external style sheet. It works if you apply display none inline on the element and remove it from the external css.

    Your Content Views plugin loads bootstrap.min.css which has this:

    /* @Navs-minified */
.nav {
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

    The Kento Latest Tabs plugin css has this:

    ul, li{
	list-style:none !important;
}

    I couldn’t find any other fix. You might try disabling those two plugins and see if that fixes it.

    Thread Starter reust89

    (@reust89)

    Thanks, bdbrown! Apparently, the “float:none” code seemed to fix everything all at once. Really appreciate it!

    You’re welcome. Glad I could help. If you don’t need any further assistance with this topic please mark it as Resolved. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header image not consistent across browsers’ is closed to new replies.