How To Implement A Fixed Header In Your Dynamik Website Builder Designs

These days Fixed Headers and Fixed Navigation are quite popular and can certainly be useful. Recently I’ve read several discussions from Cobalt Apps members asking about the best ways to implement such design attributes into their Dynamik designs. One such discussion resulted in a request for some Dynamik Skin starting points where I provide a stock Dynamik design, with the only customizations being that of the “fixed design” code snippets. So that’s what I’ve done here, with a screencast to explain how it all works.

Below are the three Dynamik Skins used in the above screencast. Note that they are only available to Cobalt Apps members, so you must be logged in to download them.

8 comments on “How To Implement A Fixed Header In Your Dynamik Website Builder Designs”

  1. great tutorial. It will not work on my install. When I uploaded your skins, I do not see the buttons to edit the CSS, JS, or PHP. I went directly to the editor in my WP dashboard and did not see the same codes(enque) to edit.

    I noticed that the Freshly Skin has a fixed header too. I cannot get that to work in my Dynamik install. I was wondering if I should clear my settings and start fresh. Set everything back to default.

    Any suggestions will help. Thanks!

    1. From what you’re describing, it sounds like your server is not allowing Dynamik to write your Skin files to the properly location, allowing for the CSS, JS, and PHP buttons to be present and for the fixed header to function. If this is the case then you’ll want troubleshoot this with this KB article: http://dynamikdocs.cobaltapps.com/article/110-does-dynamik-have-any-special-file-permissions-requirements-or-recommendations

      Otherwise you can contact our support team through the contact form located at the bottom of your “My Account” page to allow us to have a look for ourselves.

  2. Hello Eric,

    I’m trying to adapt this code to an existing site / skin but it crashes the site with the following error:

    Fatal error: Cannot redeclare skin_register_scripts() (previously declared in /sitepath/wp-content/uploads/dynamik-gen/skins/glws_no_logo/functions.php:30) in /sitepath/globelink/wp-content/uploads/dynamik-gen/theme/custom-functions.php on line 33

    Can you either share the best way to adapt the code from the above skins to an existing site, or (better) provide the code (rather than having to import the skin and then copy the code – and getting it wrong as I did).

    Thanks!

  3. This has been really helpful Eric, thank you!
    I have used it to reduce the height of a fixed header, and the logo image to smaller.
    Is there anywhere I should turn to discover where to add the transition code so the header shrinks slowly (eases) instead of flicking to the smaller size?

    I tried by adding [ transition: all 0.4s ease !important; ] plus all browser equivalents, to the site-header, header-image and other classes but it didn’t work.

    I guess I must be missing something easy. Or is this motion effect best done with JS ?

    Thanks again!

Leave a Reply