How to add a sticky menu

Homepage Community Forums Epik Theme Support How to add a sticky menu

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #3609
    Terence
    Customer

      Wes,

      Recently, Brian Gardner posted an article on how to create a sticky menu for one of his themes ~ http://www.briangardner.com/sticky-menu/

      I worked with it a little and managed to get it to work about 95% with a different child-theme.

      What do you think the chances are of getting it to work with Epik?

      Or maybe you have another way?

      Terence.

      #3614
      Eric
      Customer

        I haven’t used it before, (I don’t think Wes has either)…..but it should work with Epik as well since its a child theme of Genesis. That’s the great thing about a framework like Genesis, all of the themes that are built for it can have the same functionality and options since Genesis does all of the work, while the child theme handles the design.


        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        #3617
        Terence
        Customer

          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.

          #3619
          Dave_s
          Customer

            Hey Terence,

            I was thinking of having a go at implementing Brian’s sticky menu tip as well.

            Looking through the comments on his post it appears the main issue is it all goes a bit pear shaped on mobile devices. Not sure if there’s other issues?

            Being a copy and paster and not coder I thought I’d wait until some clever bod came up with the answer.

            If you have any success could you update this thread?

            If you do, I can offer you a free Jaffa Cake or marriage to my sister. (Top Tip: take the Jaffa Cake!) 🙂

            Dave

            #3620
            Terence
            Customer

              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.

              #3621
              Terence
              Customer

                Ooops!  Should have put that code in <code>…</code> tags, not back-ticks.

                My bad!

                 

                #3668
                Terence
                Customer

                  @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.

                  #3705
                  Dave_s
                  Customer

                    Hey Terence,

                    Cheers, I’ll check that out.

                    I have catalyst (and extender) so I know about Eric. A top bloke and the quiet man of the framework market who puts out quality stuff without needing the adulation of his followers. Unlike some others I could mention 🙂

                    Dave

                    PS: You’ve missed the boat with my sister. I sold her for 2 pieces of html and a family sized packet of Jaffa Cakes. Sorry bout that 🙂

                    #3708
                    Terence
                    Customer

                      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… 😉

                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • You must be logged in to reply to this topic.