Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Problems with education pro theme
- This topic has 10 replies, 2 voices, and was last updated 9 years, 5 months ago by lilysimulado.
-
AuthorPosts
-
November 3, 2014 at 10:07 am #130302lilysimuladoMember
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.comNovember 3, 2014 at 11:18 am #130312TonyaMemberHello 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 BootcampNovember 3, 2014 at 3:03 pm #130340lilysimuladoMemberHi 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?
November 3, 2014 at 3:20 pm #130344TonyaMemberTo 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 BootcampNovember 3, 2014 at 3:46 pm #130346lilysimuladoMemberIt worked! Thank you so much Tonya you made my day!
November 3, 2014 at 3:52 pm #130347TonyaMemberYou'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 BootcampNovember 4, 2014 at 8:42 am #130413lilysimuladoMemberSo 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; }
November 5, 2014 at 12:28 pm #130616TonyaMemberHi,
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 BootcampNovember 5, 2014 at 3:21 pm #130630lilysimuladoMemberHi 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
November 6, 2014 at 11:17 pm #130756TonyaMemberHi 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 BootcampNovember 7, 2014 at 4:47 am #130774lilysimuladoMemberWorked brilliantly, thank you Tonya!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.