[lilysimulado]

Do you have a tutorial that explains how to accomplish that? Just one static background image per page.

Thanks for your feedback!

[lilysimulado]

Hi Brad, I am referring to single full-width pages. I was planning to have a hero image with custom html content on the top of each page (under the navigation menu) so there are going to be a lot of pages (around 40-50) with custom hero content. I am currently using showcase pro theme but it's heavily customized.

I'm thinking a plugin would be the easiest way to accomplish this or is there another better solution?

Cheers

[lilysimulado]

Forgot to mention that I am currently trying soliloquy, slider revolution, and layer slider but not in love with neither of them.

[lilysimulado]

Hello again everybody! Just to clarify the mobile responsive issues I'm having most probably have to do with something I have changed when setting up the site.

I was able to solve the first error message I think, “Touch element too close”. the problem was that the font of the links on the footer was to small (14) I changed it to 16 now that error message is gone.

The second problem I'm still struggling with, “Content not sized to viewport”. More specifically: The page content is 332 CSS pixels wide, but the viewport is only 320 CSS pixels wide" I think it has something to do with the logo, anyone with any advice on what I should look at?

I have double checked that the * Add viewport meta tag for mobile browsers add_theme_support( 'genesis-responsive-viewport' ); is in functions. Also I haven't changed anything to the media queries which was recommended to check out and the rules are all still there.

Sorry for the long text:) Thanks for taking the time!

[lilysimulado]

Thanks Tom for your help! One last question (sorry im newbie), where in the css would I make these changes? I assume there is a section that only edit the mobile version of the site however I can't seem to find it. Any pointers would be a huge help.

Thanks again,

Lily

[lilysimulado]

Still stuck with this issue, anyone with any tips on how to fix it?

The 2 errors I get are,

Touch element too close
Content not sized to viewport

Any advice would much appreciated.

Thanks,

Lily

[lilysimulado]

Hi Tom thanks for the insight, I have been trying to solve the issue but the webmaster tool keep giving me the error Touch element too close and content not sized to viewport.

Anyone with advice on how to adjust mobile so it follows google guidelines?

[lilysimulado]

Hi Caley, yes I'm using the blue color scheme. the url of the site is theprepbook.com.

Thanks Brad I will definitely try that.

Lily,

[lilysimulado]

Oh my bad! It worked! Just took a while to update. Thank you Christina!

[lilysimulado]

I added the code but the logo is still not moving. I tried changing the percentages and adding it to different sections but still no reaction..did I make a mistake somewhere? Thank you for your help.

/* Title Area
--------------------------------------------- */

.title-area {
	background-color: #e44a3c;
	box-shadow: 0 0px rgba(70, 70, 70, 0.1);
	color: #fff;
	margin: 0 auto;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 300px;
}

.header-image .title-area {
	background-color: #fff !important;
	padding: 0;
}

.site-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-header .site-title a,
.site-header .site-title a:hover {
	color: #fff;
}

.header-image .site-title > a {
	float: left;
	min-height: 58px;
	width: 100%;
}

.site-title a {
margin: 10% 35%;
}

.site-description {
	backface-visibility: hidden;
	font-size: 16px;
	line-height: 1.3;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

[lilysimulado]

Hi Christina! Thanks for the response, it's just a temporary logo but for example if you would look at it now (updated logo) you would see how the logo is pushed at the top of the site.. do you know how I would move it down and a little to the right closer to the nav menu? Thank you for your help.

My Current Style css

Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #fff;
	border-top: 3px solid #e44a3c;
        box-shadow: 0 3px rgba(70, 70, 70, 0.05);
	min-height: 61px;
}

.education-pro-home .site-header {
	position: relative;
	top: auto !important;
	width: 100%;
	z-index: 499;
}

/* Title Area
--------------------------------------------- */

.title-area {
	background-color: #e44a3c;
	box-shadow: 0 0px rgba(70, 70, 70, 0.1);
	color: #fff;
	margin: 0 auto;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 300px;
}

.header-image .title-area {
	background-color: #fff !important;
	padding: 0;
}

.site-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-header .site-title a,
.site-header .site-title a:hover {
	color: #fff;
}

.header-image .site-title > a {
	float: left;
	min-height: 58px;
	width: 100%;
}

.site-description {
	backface-visibility: hidden;
	font-size: 16px;
	line-height: 1.3;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

[lilysimulado]

Worked brilliantly, thank you Tonya!

[lilysimulado]

Hi Tonya, thank you for the tip! I finally see the icon as well:) the only thing that's holding me back right now is trying to center the responsive navigation menu. The responsive menu box always appear to the far right on my iphone and ipad and I can't seem to figure out how to center it. Do you have any advice that could point me towards the right direction?

Thank you again for taking the time to help,

Lily

[lilysimulado]

Thanks mickmel that worked brilliantly! Now I just have to adjust to center the dropdown menu, right now it's always showing to the far right which makes it hard to see when using a mobile. I have tried to adjust some of the code below to center it but can't seem to get the dropdown menu box to move, do you have any advice on what to edit to make that happen?

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover,
	.genesis-nav-menu.responsive-menu li.current-menu-item > a {
		background: none;
		color: #444;
		display: block;
		line-height: 1;
		padding: 12px 0;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}
	
	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";
		float: right;
		font: normal 16px/1 'dashicons';
		height: 16px;
		padding: 11px 0;
		right: 0;
		text-align: right;
		z-index: 9999;
	}
	
	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu {
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		padding-left: 20px;
		margin: 0;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		box-shadow: none;
		color: #444;
		padding: 12px 0;
		position: relative;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu {
		padding-bottom: 16px;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a {
		background: none;
		color: #000000;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
		background: none;
		color: #e7e7e7;
	}

Thank you again!

[lilysimulado]

So I finally got the header looking the way I wanted but just noticed this morning that the responsive menu is not showing at all on mobile and tablets. If I keep tappin the screen I see some sorts of menu reaction but it seems like I can''t see it because everything is white like the background. Is there any way to edit the responsive navigation and to make it visible.

I have tried editing the color on this code but no luck so far...

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

[lilysimulado]

It worked! Thank you so much Tonya you made my day!

[lilysimulado]

Hi Tonya. sorry I probably should have mentioned in my text that I don't want to use the Header right widget for my sites navigation, any ideas on how to remove the blue background color and align the navigation trough css?

[Author]

Posts