Announcement

Collapse
No announcement yet.

What Genesis and Dynamik the Dynamik Duo cant create a Fixed Header???

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • What Genesis and Dynamik the Dynamik Duo cant create a Fixed Header???

    I'm new to Genesis and Dynamik Website Builder. I am amazed, the best of the best cannot have a simple checkbox to check that will allow us to nail down the header along with a custom logo to the top of the page. WHAT! I get it this is for professionals that should have no problem putt together code in CSS, HTML and PHP oh maybe some Jquery, but come on.

    Ok, enough bitching, Genesis Sticky Menu plugin is a start, but no Custom Logo and would really like to keep my own menu style, unless I am missing something.
    This link seems promising but honestly a little scary for me considering that others are having issues with it. http://sridharkatakam.com/how-to-set...on-in-genesis/
    I for one don't understand the Logo and navigation disappearing on a site, I don't get a design like that. Anyone? Please! Using the latest Genesis and Dynamik Website Builder plus WP 4.1.
    If not maybe I have to go back to the Xtheme that actually does all of what I need.

  • #2
    If Xtheme got a checkbox, it´s the way to go (just to promote that a little bit more).
    Seeing others achieved it with Dynamik already, there´s still hope. No checkbox though.

    http://cobaltapps.club/forum/ma...v-into-one-div
    http://cobaltapps.club/forum/ma...der-dwb-basics

    Some members, commenting in Sridhar´s thread you linked to, got it working with Dynamik it seems.

    (For rants, a ticket to support staff is recommended - you are mainly talking to members here)
    Last edited by SiGa; 01-07-2015, 09:11 PM.

    Comment


    • #3
      Actually kinda bummed if I have to use X, its not that its not working but concerned on this site, hoping for lots of traffic and wondering if it will hold up. Running out of time though. I really was settling on Genesis and Dynamik. Headway's not bad but slightly buggy. Any thoughts on heavy traffic with Xtheme?

      Comment


      • #4
        It would be difficult to add this setting to Dynamik, because Dynamik doesn't have any fixed heights.

        You have to deal with the Admin Bar, header height, navigation and their media queries.I think you could use some Javascript to get the current header height and use that value as the the padding-top value for the body, but I have never seen a theme do that.

        Here is the old fashioned way, but you will have to adjust it based on your header height:

        Code:
        /* Sticky Header */
        
        body {
            padding-top: 100px; /* Equal to header height. */
        }
        
        .site-header {
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 9999;
        }
        
        .admin-bar .site-header {
            top: 32px;
        }
        
        /* Hide Tagline
        
        .site-description {
            line-height: 0;
            margin: 0;
            padding: 0;
            text-indent: -9999px;
        }
        
        */
        
        /* Media Queries */
        
        @media only screen and (max-width: 1140px) {
            
            body {
                padding-top: 180px; /* Equal to header height. */
            }
            
        }
        
        @media only screen and (max-width: 782px) {
        
            .admin-bar .site-header {
                top: 46px;
            }
            
        }
        
        @media only screen and (max-width: 600px) {
        
            #wpadminbar {
                position: fixed;
            }
        
        }
        Last edited by Junior Atoms; 01-08-2015, 01:30 AM.

        Comment


        • bearthedog
          bearthedog commented
          Editing a comment
          Hi Junior,
          Thanks for your help. I used just a portion of what you put up:
          Entered in Genesis/Dynamik Custom:
          .site-header, .nav-primary {
          position: fixed;
          top: 60px;
          width: 100%;
          z-index: 2000;
          }

          .nav-primary {
          top:30px;
          z-index: 3000;

          }

          .responsive-primary-menu-container{
          background-color: #555555;
          border-bottom: none;
          }

          The above is kinda working, however I found something that I wonder if others have used?
          http://stickyjs.com
          What do you think? It looks great on the demo site.

          I'm thinking of getting a template from Genesis, Metro Pro instead of using Xtheme. Still trying to use Genesis.
          Any thoughts?
          Thanks

      • #5
        Thanks Junior! ... I was about to go looking for this for a site I am working on. Works great! ... on mobile too

        Comment


        • #6
          If you want to stick the header and nav-primary, try something like this:

          Go to Genesis > Dynamik Custom > CSS and paste this in:

          Code:
          /* Dynamik Sticker */
          
          body {
              padding-top: 150px; /* Equal to header plus nav heights. */
          }
          
          .dynamik-sticker {
              left: 0;
              position: fixed;
              top: 0;
              width: 100%;
              z-index: 9999;
          }
          
          .admin-bar .dynamik-sticker {
              top: 32px;
          }
          
          /* Hide Tagline
          
          .site-description {
              line-height: 0;
              margin: 0;
              padding: 0;
              text-indent: -9999px;
          }
          
          */
          
          /* Media Queries */
          
          @media only screen and (max-width: 1140px) {
              
              body {
                  padding-top: 200px; /* Equal to header plus nav heights. */
              }
              
          }
          
          @media only screen and (max-width: 782px) {
          
              .admin-bar .dynamik-sticker {
                  top: 46px;
              }
              
          }
          
          @media only screen and (max-width: 600px) {
          
              #wpadminbar {
                  position: fixed;
              }
          
          }
          Go to Genesis > Dynamik Custom > Functions and paste this in:

          PHP Code:
          //* Open dynamik-sticker div
          add_action'genesis_before_header''dynamik_open_sticker');
          function 
          dynamik_open_sticker() {
              
              echo 
          '<div class="dynamik-sticker">';

          }

          //* Close dynamik-sticker div
          add_action'genesis_after_header''dynamik_close_sticker' );
          function 
          dynamik_close_sticker() {
              
              echo 
          '</div>';


          Last edited by Junior Atoms; 01-09-2015, 01:19 AM.

          Comment


          • bearthedog
            bearthedog commented
            Editing a comment
            Hi Junior,
            This looks like it can work, however two things are happening.

            #1 there is a photo just below the header and nav that is in the same div and that is not moving with the content now.
            For some reason I cannot paste the code here, it gets deleted when I save it.???

            But the div id is "ez-feature-top-container-wrap" next line:
            div id is "ex-feature-top-container"

            The complete code can be seen in the attachment.

            #2 the mobile menu is no longer taking my change from blue to grey without a border. I tried and put in the code I used before for that change but it didn't
            work for some reason.
            Attached is the code from firebug
            By the way thanks for putting up with a newbie
            Last edited by bearthedog; 01-08-2015, 09:14 PM.

          • Junior Atoms
            Junior Atoms commented
            Editing a comment
            Try it with the updated PHP Code

        • #7
          Yes that was with the updated code

          Comment


          • Junior Atoms
            Junior Atoms commented
            Editing a comment
            I updated the PHP code so that feature-top is not sticky. Try it again.

          • bearthedog
            bearthedog commented
            Editing a comment
            OK, Junior I feel bad to keep on asking you to help, but honestly its greek to me. So now the menu is attached to the photo and scrolls along with the photo.
            However the menu should be sticky also. As is the header now. The menu is now approx. 176px lower now, below the header (which doesn't look to bad actually)
            Oh, in the code attached I forgot to put the code that changed the mobile border to grey from blue. And that now works.
            .responsive-primary-menu-container{
            background-color: #555555;
            border-bottom: none;
            }

        • #8
          Sorry not quite working I'm having a problem getting this code to show. lets try again.

          FirefoxScreenSnapz004.png

          Comment


          • Junior Atoms
            Junior Atoms commented
            Editing a comment
            Updated the PHP Code again to account for nav-primary above header.

          • bearthedog
            bearthedog commented
            Editing a comment
            Junior you are a freakin Genius. Is there anything that I should be careful of because of this code. Like not to add to many plugins or something?
            That may sound crazy, but I am so happy this is working I don't want anything to happen to it.
            Thank You so much Junior and to SIGa you guys makes this forum great. Wait how can they call you two Junior members?
            I think there should be a Freakin Genius category!

          • Junior Atoms
            Junior Atoms commented
            Editing a comment
            I wouldn't try to be careful. Use as many plugins as you want and if something doesn't work, try to fix it.
        Working...
        X