Sticky Navigation on Education Pro

[G9Stuart4]

Hi Everyone,

I'm having some troubles at the moment and I have tried to follow http://my.studiopress.com/tutorials/sticky-menu/ however it makes my bottom (footer) menu disappear. I can see it's targeting the wrong navigation menu, but how can I make it target my menu and header section of the Education Pro theme?

http://education-pro-sticky-nav

[Christoph]

Hi,

the code from the tutorial is using the secondary navigation.
The secondary navigation is relocated to the footer in Education Pro.

You can try changing the code of the tutorial to target the primary navigation.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[G9Stuart4]

Hi,

Yeah I understand that, but sorry for my ignorance, I'm new to Genesis. I'm not quite sure how to change that to the header as that menu used in the header is a widget area and not an actual navigation (I mean it's a menu, but it's not primary or secondary, if you know what i mean) It's set in the widget areas?

Thank you.

[Christoph]

So do you want to have the header-right widget area with your menu to be sticky?

Or do you want to have a sticky menu at the top of the screen as in the tutorial?

FYI, you can add additional menus:

Adding Additional Nav Menu’s in Genesis

How to Add a Footer or Tertiary Menu to a Genesis Child Theme

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[G9Stuart4]

I'm looking to have the whole section sort of drop down and go a bit smaller upon scroll, could you recommend the easiest way to do that?

Thanks for the links, I'm going to have a good read through them now, as that sounds like it could be beneficial, as I'm looking to add menus to the footer.

I appreciate that a lot!

[Christoph]

You are welcome.
I just want to make sure I understand what you want to achieve.
So in essence, you would like the effect of Altitude Pro (with or without the change from transparent to the dark)?
That will involve some jQuery. If you have access to Altitude Pro you could borrow the code.

A good jQuery plugin for making elements sticky is http://leafo.net/sticky-kit/

When you look at the header right widget menu in the Inspector you can see that it has a section id. On the demo the section id is #nav_menu-2. (Your section id could be different)
You can target that id with jQuery.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[G9Stuart4]

Sorry. I was away for a few days on a mini break. Apologies for that.

Yes, basically I want to make my header section scroll like Altitude Pro but instead of changing colour, just shrink in size really (only slightly).

I do have access to all the themes, but this is the first time I have ever tried ti make a Genesis website, and I'm struggling to understand what to copy :/ and I could normally do this very simply myself with HTML, CSS and jQuery, but as I'm using Genesis as a framework here, and it's my first time viewing the code and I'm not quite up to scratch with PHP (very beginner level but learning) I'm a bit stuck 🙁 but I don't want to give up.

[markus]

Hi Christoph,

I don't mean to hijack this thread so hopefully this question is appropriate here.

I too am looking to make the navigation sticky in education pro theme. For me it's just the primary navigation that I'd like to make sticky. I've seen the code that makes the secondary nav sticky, is there a code snippet that does this for the primary navigation menu spot at the top of the page?

Thanks in advance.

Cheers
Markus

[Christoph]

@G9Stuart4
Sorry, I must have missed the notification of your reply.
If you did not solve your problem this might help:
The jquery for the shrinking effect of Altitude Pro is in global.js
You would have to experiment what css has to be copied. I guess the selectors in question start around line 906 Site Header.
To keep the transparency just change the background-color in .site-header.dark

@markus

I tested the code below on the theme demo.
http://screencast.com/t/LhiZ5ZS8
Adjust the values to your needs.
You will more than likely have to adjust the media queries.

Replace the code around line 1264 of the style.css with this:

.nav-primary {
	background-color: #34678a;
	color: #fff;
	min-height: 47px;
}

.nav-primary .genesis-nav-menu {
	font-size: 14px;
}

.education-pro-home .nav-primary .genesis-nav-menu {
	position: fixed;
	background-color: #34678a;
	z-index: 1000;
	left: 0;
	padding-left: 100px;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[markus]

Sweet! Thanks Christoph, I will give it a go and report back. Thanks for all your help!
Cheers!
Markus

[Author]

Posts