HTML5/Genesis 2.0 sticky header

Homepage Community Forums Epik Theme Support HTML5/Genesis 2.0 sticky header

Tagged: 

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #6499
    Terence
    Customer

      I have been trying for some time to introduce a sticky/fixed header to Epik at http://qloudpress.com and at last I am getting somewhere. Here’s what I have got so far…

      /*
      Site Header
      ---------------------------------------------------------------------------------------------------- */
      /* This is where the magic happens. You need
       * to assign a fixed position in order for
       * everything else to work correctly.
      --------------------------------------------- */
      .site-header {
      	position: fixed;
      	top: 0;
      	width: 100%;
      	z-index: 2000;
      }
      
      /* This will ensure your site looks correct
       * when the admin bar is displaying.
      --------------------------------------------- */
      body.admin-bar .site-header {
      	top: 32px /* Make this 32px if MP6 is installed */
      }
      
      /*
      Body Element
      ---------------------------------------------------------------------------------------------------- */
      /* This Should Be Equal to the Height of your
       * fixed header bar.
      --------------------------------------------- */
      body {
      padding-top: 60px;
      padding-top: 4.28571429rem; /* Only Add this in Genesis 2.0 */
      }

      Everything seems to be working except for one thing ~ the color disappears from behind the header making it transparent for some reason.

      Eric, have you any idea why this is and how I can fix it?

      Terence.

      #6500
      Terence
      Customer

        I simply have this code at the bottom of my style.css file, by the way. I don’t know if it should be more strategically located and if this is part of the problem.

        #6511
        Eric
        Customer

          It definitely has to do with the fact that you’re using “position fixed”, “top”, etc…..not sure why it’s not working though, so I’d be the wrong person to ask.

          You could add this to your css to override it –

          .head-wrap .site-header {
              background-color: #293f5e !important;
           }

          Other than that I have no idea.


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

          #6519
          Terence
          Customer

            Thanks Eric, I tried your suggestion but adding that override makes no difference.

            I also moved all the code to the header location around #1872, but nothing changed.

            I then tried NickTheGreek’s plugin “Genesis Responsive Header” ~ which I used to have to use with 1.2, but don’t seem to need with 1.3 ~ because it normally allows you to set the header background color. But this time, with HTML5 and Genesis 2.0 it made no difference at all.

            I then tried background-color: #293f5e !important; in various locations but for the moment I seem to be stumped as it remains stubbornly transparent.

            This is a real shame because I particularly liked this method since, to my eyes at least, its very elegant and requires only minimal CSS additions.

            Something within HTML5 seems to be controlling the header in a way I don’t understand.

            Yet.

            #6523
            Eric
            Customer

              Make sure you’re adding it in right, because that code definitely works – http://i.imgur.com/wl0a8NM.png

              If you have caching plugins, make sure and clear them or disable them to see the changes instantly.


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

              #6529
              David Chu
              Customer

                Hi,
                I agree that Eric’s code should work, as long as it’s in the Epik style.css.

                I see interference from a bunch of inline styles, I don’t know if that’s coming from Jetpack or something else, you’ll have to hunt that down. This code is in there, and the 2nd line is adding an extra dollop of background color. If that can be deleted or at least set to “background-color: inherit;”, then the bar revealed by Eric’s code will look nice, with the background color and the image.

                .site-header .wrap {
                  background-color: #293F5E !important;
                  padding: 1rem 0;
                }

                Dave

                #6539
                Terence
                Customer

                  @Eric & @David ~ thanks guys. I think you’re right Eric, there might have been a caching problem. I’m sure we’re just a gnat’s away, but what do I know, right… 8^)

                  This is all I now have in my Site Header section…

                  /*
                  Site Header
                  ---------------------------------------------------------------------------------------------------- */
                  
                  .head-wrap {
                  	background: #303236;
                  	margin: 0 0 40px;
                  }
                  
                  .site-header {
                  	margin: 0 auto;
                  	max-width: 100%;
                  }
                  
                  .site-header .wrap {
                  	padding: 16px 0;
                  	padding: 1rem 0;
                  }
                  
                  /*
                  My Site Header
                  ---------------------------------------------------------------------------------------------------- */
                  /* This is where the magic happens. You need
                   * to assign a fixed position in order for
                   * everything else to work correctly.
                  --------------------------------------------- */
                  .site-header {
                  	position: fixed;
                  	top: 0;
                  	width: 100%;
                  	z-index: 2000;
                  }
                  
                  /* This will ensure your site looks correct
                   * when the admin bar is displaying.
                  --------------------------------------------- */
                  body.admin-bar .site-header {
                  	top: 32px /* Make this 32px if MP6 is installed */
                  }
                  
                  /*
                  Body Element
                  ---------------------------------------------------------------------------------------------------- */
                  /* This Should Be Equal to the Height of your
                   * fixed header bar.
                  --------------------------------------------- */
                  body {
                      padding-top: 60px;
                      padding-top: 4.28571429rem; /* Only Add this in Genesis 2.0 */
                  }
                  
                  .head-wrap .site-header {
                      background-color: #293f5e !important;
                   }

                  Originally max-width was set to 1140px in this section…

                  .site-header {
                  	margin: 0 auto;
                  	max-width: 100%;
                  }

                  but if I change the max-width back to 1140px instead of 100% the header doesn’t expand right the way across at full size. But as you can see here ~ http://www.studiopress.com/responsive/?http://qloudpress.com ~ even when I use 100%, it doesn’t work that way for all viewports, 768 and 1024 for example.

                  What am I doing wrong?

                  #6656
                  Terence
                  Customer

                    I’m struggling here guys… throw me a crumb!

                    #6692
                    Terence
                    Customer

                      Is my CSS so goddamn awful you don’t want to talk to me any more?

                      I’m guessing you’re on your holidays, so I won’t take offence.

                      #6704
                      Eric
                      Customer

                        @Terence No there are a lot of other users here in the forums with questions as well, I’m getting to them as fast as I can, it’s a lot of work. Don’t forget, this is a community forum, which happens to be free. So if me, David or any other community members are not able to answer at the pace you want then that simply means either we haven’t got to it yet, or we simply missed it.

                        No one here has to reply if they aren’t able to or prefer not to. I could understand if you were paying for a premium support level (which Wes should definitely add IMHO), but this is free. Trust me, I try and answer as much as I can, whenever I can.

                        Couldn’t tell if you were upset or joking, but felt the need to explain just in case.

                        Back to the topic –

                        I’ve checked your site but it seems to be working on my end, unless I’m missing something. Have you got it working or is there something else you need?


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

                        #6710
                        Terence
                        Customer

                          No need to explain at all ~ but what do you mean I am not the center of your Universe?

                          Now I am heart-broken as well as a non-comic.

                          My missus always says most people don’t get my sense of humor. {That’s because she doesn’t have one ~ but don’t tell here I said that}

                          For instance, I asked her the other day, “…what’s the difference between man’s best friend, and his wife?”

                          Answer ~ if you locked your dog in the trunk of the car, he would still love you when you let him out! 8^)

                          Anyway, no, I didn’t fix it, its still the same. I guess you didn’t get time to check it as I suggested, but as you can see here ~ http://www.studiopress.com/responsive/?http://qloudpress.com ~ even when you use 100%, it doesn’t work that way for all viewports, 768 and 1024 for example.

                          Keep up the great work. And remember, I have ADS and a weird sense of humor… 8^)

                          #6715
                          Eric
                          Customer

                            I was viewing the first couple and didn’t scroll over to see the other viewports you were referring to. Unfortunately I can’t figure out what the solution is. The code seems off somewhere and I can’t come up with whats going on.

                            If anyone else out there wants to help out with this feel free. I’m out of ideas.


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

                            #6725
                            Terence
                            Customer

                              Maybe Wes will take a moment and have a look.. do you think?

                              #6876
                              Terence
                              Customer

                                Apparently Wes has gone awol, so I asked Brad Dalton, the guy who coded the original version of this method of creating a sticky menu, and what he told me was this…

                                It needs responsive design.

                                You will need to customize the responsive design using the CSS media queries as an guide in your child themes style.css file.

                                Hope you understand that responsive design varies depending on the individuals preferences and the design of the theme you’re using.

                                It’s not the same for every theme.

                                So now, arguably, I am wiser, but I still don’t know what to do to resolve this issue.

                                With this additional input, can someone (Eric?) steer me in the right direction?

                                #6887
                                Eric
                                Customer

                                  I know I’ve mentioned this many times here, but Wes hasn’t gone anywhere, he’s busy working on theme updates and other projects. Which is the reason I’m here…

                                  Again, I can’t figure out what the issue is on my end. I usually try to answer and fix what I can, especially if it’s an issue with the default code of the theme, but this falls under the “Custom Code” category as noted here – https://appfinite.com/topic/forum-rules/ …..can’t really guarantee custom code will always work, but I’ll always try first.

                                  It’s always recommended to contact the person you originally got the code from to see if they can assist or if they have some tutorials to help you out. If they’re not available I’ll leave the thread open in case anyone else may have a solution on this. But again, I don’t have an answer for this as I’m unfamiliar with sticky menu code.

                                  If anyone else can help @Terence out please feel free.


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

                                  #6910
                                  Terence
                                  Customer

                                    Thanks for trying Eric.

                                    The author simply says its a “media query issue” and if I would like to pay him to do some custom coding he’ll think about it, or failing that I should “take a course”.

                                    So I guess that’s me on my own again, looking for the paddle… 8^)

                                    #6919
                                    Jason M
                                    Customer

                                      @Terence is this from Brian Gardner’s tutorial? Or somewhere else? I have a client that is interested in having something like this on their site.

                                      #6932
                                      sliceofscifi
                                      Customer

                                        Hi Terence! Nice to see you play over here too as well as the Studio Press forums 🙂

                                        I don’t have any exact code for you, but at the bottom of the Epik style.css, there’s a section called “Media Queries”. and in order for your floating bar to work on all the sizes defined there, you’d have to figure out the widths and percentages you’d need for each size for your site, and include that definition in each size.

                                        Right now, if that sticky header is only defined in the “Site Header” section, it doesn’t have any responsive options to fall back on when viewed on those devices, so when you add them, it should start working.

                                        Best place to start would be to look at how the site header is defined in Media Queries in the Genesis 2.0.1 sample child theme… it could give you a good starting point.

                                        #6933
                                        Terence
                                        Customer

                                          @Jason ~ no, but close. Actually its from Brad Dalton. I saw it here [ http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/ ] and thought it looked like a really simple solution. Which it was, since he left out the whole media queries bit, which is unusual for Brad as his stuff is usually pretty spot-on.

                                          Fortunately, he’s take pity on me and he’s taking a look, so I should have an answer pretty soon now.

                                          #6934
                                          Terence
                                          Customer

                                            @atouchofsummer ~ I play everywhere. When you get to my age, you start to realize just how much of a game life is and how much of life is just a game.

                                            Thanks for the guidance. I am looking at Media Queries section in the Genesis 2.0.1 sample child theme right now and I do see some differences. Surely it can’t be that simple?

                                            I’ll go and see if I can make it work.

                                            Taa muchly!

                                            #6935
                                            Terence
                                            Customer

                                              @touchofsummer ~ you were absolutely right and its fixed now.

                                              All it required was to change two fixed dimension “header-width: ###px” statements to “header-width: 100%” in the media query section, and the job’s done.

                                              Awesome! Thank you so much.

                                              I always wanted to be an expurd, and now I are one… 8^)

                                              #6936
                                              sliceofscifi
                                              Customer

                                                Isn’t it awesome when the solutions we need are far more simple than our brains had been building them up to be? 🙂

                                                Glad to help!

                                                #6948
                                                BossLady
                                                Customer

                                                  Terence, looking at what you’ve done so far, I think what you’re looking for is to prevent your top widget (slider in this case) from being covered by the menu/header when it is in mobile view. I know you responded to this post over at FatMedia and I can see in Firefox that you added “padding-top” to the body. You need to also add that to the media files. I used the example of 81px/8.1rem from the FatMedia article as a starting place and it worked for me, but you may have to tinker with it. Scroll to the bottom of your style sheet and find the @media only screen and (max-width 1039), around line 3876 and add

                                                  	body {
                                                  		padding-top: 81px;
                                                  		padding-top: 8.1rem;
                                                  	}

                                                  In media files you only have to add css where you want it to start doing a certain behavior. It will continue with that behavior until you tell it something new. So you only have to add it once. I think (for me) it could use a little more padding, but 81px looks fantastic when it hits the 1023 break-point. So I might bump it up a little in the 1039 section and add it again to the 1023 with the 81px/8.1rem for the padding. Like I said, you may have to tinker a bit with the padding to get it where you want it.

                                                  Hope this is helpful.

                                                  #6963
                                                  Terence
                                                  Customer

                                                    @BossLady ~ thank you so much for trying to help me with this.

                                                    I tried what you suggested but I couldn’t see that it made any obvious difference.

                                                    I don’t doubt what you are saying is correct, but I am wondering if the problem you are seeing is not the one I am trying to fix.

                                                    You see the header 100px deep because you are not logged in and this changes “Log In” to “Log Out” and adds “Register” to the menu, which cause it to wrap inside the header. I think that’s why for you it the menu covers the slider. Also the logo has slipped out of position since adding this sticky header and is no longer on top of the home anchor.

                                                    Either way, first I have to fix that problem then I can come back to the media queries.

                                                    Any ideas on fixing the logo position?

                                                    #6965
                                                    Terence
                                                    Customer

                                                      @BossLady ~ with nothing more clever than rearranging the menu items a little the header should now appear to you to be no more than 60px high? Yes?

                                                      #7096
                                                      Terence
                                                      Customer

                                                        @BossLady ~ I just looked at the website with my iPhone and I think I now see what you mean. Almost half the slider image, in fact half of the screen was obscured by the header.

                                                        But try as I may, I am still not understanding how to correct this.

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