Custom Header Image Issues

Travelify
1

Thank you for creating this theme. It looks great. I have a couple of problems with my site. I created a header image with both a logo and text which I uploaded using the “Header Image” option under the “Appearance, Customize” option. Then I used the following custom CSS to eliminate the extra white space around the image.

.header-image {
	margin-top: -100px;
}

.hgroup-wrap {
	padding-top: 0; 
	padding-bottom: 0;
}

#main-nav {
	margin-top:  -38px;
}

My probelms are:
1 - The header shows up fine on my computer, but on my phone, The header runs off the top of the phone (I can only see the bottom half of it).
2 - The facebook social icon I am using is visible on the computer version, but the hyperlink does not work. It is not visible at all on my phone.

My site is:
http://steeplechase.blue-door-designs.com/

Thank you for your help.

2

Replace code you are using now with this one instead:

@media (min-width: 767px) {
	.header-image {
	margin-top: -100px;
	}

	.hgroup-wrap {
	padding-top: 0;
	padding-bottom: 0;
	}

	#main-nav {
	margin-top: -38px;
	}
}

@media only screen and (max-width: 767px) {
	.hgroup-right .social-icons {
		display: block;
	}
}
3

Great!

I can see the header on my phone and the facebook icon works, but the facebook icon link is not operational on the computer version. Can you help?

Thanks.

4

Now add this to the same Custom CSS field right after code you added earlier.

.hgroup-wrap {
    z-index: 100;
    position: relative; 
}
5

Thanks, that fixed the facebook icon on my computer, but it no longer shows up on my phone.

Also, I just noticed that an extra navigation link shows up on the cell phone version that is called “Navigation”. Is there a way to remove that?

Thank you for your help.

6

Replace EVERYTHING in Custom CSS field you have now with this code instead. In your code there were duplicate values as well as missing brackets.

/* remove page title */
.page .entry-title {
    display: none;
}

/* hide text on slider */
.featured-text {
    display: none;
}

@media (min-width: 767px) {
	.header-image {
		margin-top: -100px;
	}

	.hgroup-wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	#main-nav {
		margin-top: -38px;
	}
	.hgroup-wrap {
		z-index: 100;
		position: relative;
	}
}

@media (max-width: 767px) {
	.hgroup-right .social-icons {
		display: block;
	}

}

Name “Navigation” for usability in case you would use blog index for front page. That way you would have a blank line of the top which of course wouldn’t be very intuitive. Here is a “fix” for that.

7

Thank you. Worked great!

I am having a problem viewing a particular pdf on my site when using Firefox. All other browsers are working. Part of the file loads, but not all of it.

Do you have any ideas why this would happen?

Thanks again.

8

This is not theme related, nor WordPress related because it is a separate PDF. Many thing might causes this kind of behavior such as slow connection speed, low computer resource that can’t render this PDF, file is too big for browser to render, connection was lost while it was loading etc. Whatever is the reason it has nothing to do with WordPress and WordPress themes.

9

Okay, thank you for your quick response. I appreciate your help.