Header Problems with education pro theme

[lilysimulado]

Hi everyone, trying to create my first genesis framework site with the education pro child theme and have been banging my against the wall all day and was hoping maybe someone here could help move forward.

I have repositioned the primary navigation to the site header by using the snippets from Brian Gardner, now I need to align the navigation menu to the right of the logo and remove the dark blue header color that shows behind the logo.

I have tried to remove the dark blue color and align the navigation to the right all day but can't seem to figure it out. Any tips on how to fix this?

Thanks for taking the time.

Lily

http://theprepbook.com

[Tonya]

Hello Lilly,

The theme comes with a Header Right widget area to handle this for you. Instead of repositioning the primary nav, instead what you want to do is:

• Go to Appearance > Menus, select your primary nav menu, and uncheck the option for "Primary Nav". Then save the menu.
• Go to Appearance > Widgets. There you will find Header Right. Click to expand it out. Then drag the widget "Custom Menu" onto that widget area. Select your primary nav menu and click on save.

You should now have your navigation properly styled and shown to the right side of the logo.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[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?

[Tonya]

To remove the background color, you change the following css in your style.css sheet, i.e. assuming you are directly editing your child theme:

Line 1281

.nav-primary {
	background-color: transparent !important; /* #34678a; */
	color: #fff;
}

From there you will have to continue styling the .nav-primary to position it to the right of the logo, set it's width, etc. You do this, you can search in your style.css file for the header widget styling and then emulate that.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[lilysimulado]

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

[Tonya]

You're welcome. Enjoy the rest of your day 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[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;
}

[Tonya]

Hi,

Sorry for the delay. Yesterday was a busy, busy day.

Looking on both my iPad and using , I see the responsive menu icon on all devices. This icon appears once the device width is below a certain width (via jQuery), i.e. meaning it is now mobile device.

A tip I want to share with you is to always increment your theme's version number to ensure those who have already visited your website receive your latest changes. You see what happens is: when someone visits your site, the resources (styles included) are cached (stored) in their browser until they clear them or the file name changes. Within WordPress, we change the file name by changing the version, as the version is appended to the filename.

To increment your theme's version number, you go to functions.php and find the following:

define( 'CHILD_THEME_VERSION', '1.0' );

Simply increment 1.0 to 1.1 or whatever and you are good to go.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[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

[Tonya]

Hi Lilly,

On line 1281 of your stylesheet, the .nav-primary has a margin-left that is pushing the nav over and off-center when in mobile mode. So what you want to do is add an adjustment in

In the @media queries you want to add the following to line 2382:

	.nav-primary {
		margin-left: auto;
	}
	
	.responsive-menu-icon {
		margin: 0 auto;
	}

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[lilysimulado]

Worked brilliantly, thank you Tonya!

[Author]

Posts