How to add a sticky menu

Thanks Eric, I will give it a try and ~ no doubt ~ turn up back here in a bit with something that doesn’t quite work.

We shall see.

I have three specific modifications/enhancements I want to make to Epik, which are only partially supported by the existing CMS/Framework/Child theme combination ~

1. Sticky Menu (already discussed), and

2. Conditional menu logic ~ for example, why does a “home” menu item need to appear on the homepage? On every other page, yes, but not the homepage itself? ~ and

3) Scroll to page #ID location (JS scrolling), an animated scroll up and down the home page to various #ID locations, so that the home page ~ initially ~ works as if it was a singe page website.

Not going to spoil it Wes ~ promise ~ just going to make it a weeny bit more awesomer!

Terence.

Hey Dave,

Absolutely!

I am a little bit like that myself, although I do seem to be able to muddle my way through.

Since responsive is the way to go, and most Genesis child themes are already responsive, we need to take care of that too.

In many designs, the logo starts out on the left within the laptop/pc/monitor design size, but is then centered on lower resolutions (iPad, iPhone, etc.).

Genesis child themes include breakpoints in their CSS which change the way things are displayed at certain sizes. So lets say that we wanted our logo centered on any screen size below 768px.

We need to find the styles pertaining to this breakpoint, and add our new header style, as follows:

`@media only screen and (max-width: 767px) {
#header { background: url(“images/logo.png”) center no-repeat; }
}`

You can see that I’ve centered the logo instead of left aligned it. You can also use a different logo for lower resolutions, as follows:

`@media only screen and (max-width: 767px) {
#header { background: url(“images/logo-mobile.png”) center no-repeat; }
}`

That’s as far as I have got with that issue so far.

Terence.

P.S. Don’t like Jaffa cakes.  Its either a Jammy Dodger, or send me a picture and I’ll have a think about it.

@Dave_s  ~  I cheated.

No this isn’t a confession about your sister.  I used Eric Hamm’s version of Brian Gardner’s code which he made into a plugin and gave me.

Its not on general release, as far as I know, but it has a GPL license and he is a pretty awesome coder ~ Catalyst, Dynamik, Genesis Extender etc. ~ so I feel fairly confident it works OK.  Here’s a download link if you want to try it ~ Genesis Sticky Menu Plugin

I am using Epik in the same configuration as in the demo ~ with a custom menu widget in the header-right location Wes has provided.

Apart from matching the background color to the one the child-theme is using, the only problem I am having with Eric’s plugin/Epik is with “.genesis-nav-menu”.  In the original design Wes shows a 60px nav-bar which in my version ~ but only when it goes sticky ~ now reduces to just 30px, which doesn’t leave room for the logo.

I haven’t yet tracked down how to fix this issue since when I try and add a “min-height:60px” directive to the “.genesis-nav-menu” it also affects my nav-bar and I end up with a 85px top menu, which is not at all what I wanted.

Maybe you will have better luck and figure out how to do it.

Terence.

The only problem I am having with it at present is the fact that I can’t get the sticky menu to go to the same height as the main nav bar.

Its on a dev server, but if you put “46.149.20.184 mediacause.dev” in your host file you should be able to see how far I have got so far ~ not very far!

Terence.

By the way, that sounds like a good price you got for your sister. I got a poodle for mine… 😉