Custom navigation header

Site URL: https://www.honeyandcocreative.com/

Hi, I really like the attached header/nav - any idea on how this would be achieved?

Yes...well almost! I am working on developing a solution similar to this for a client at the moment, it'll need the bar coding in HTML and a piece of javascript and CSS to make it work.

19 hours ago, Ziggy said:

Yes...well almost! I am working on developing a solution similar to this for a client at the moment, it'll need the bar coding in HTML and a piece of javascript and CSS to make it work.

Oh nice! I'd be interested to know how you achieved it once you're done if that would be okay! 

Well, I'm using this and tweaked it:

http://jsfiddle.net/smc8ofgg/

This is adaptation, placed in Header Code injection:

<script>
myID = document.getElementById("myID");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 5) {
        myID.className = "bottomMenu show"
    } else {
        myID.className = "bottomMenu hide"
    }
};

window.addEventListener("scroll", myScrollFunc);
</script>
<style>	
.bottomMenu {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 99;
    transition: all 1s;
}
.hide {
    opacity:0;
    top:-60px;
    left:0;
}
.show {
    opacity:1;
    top:0;
    left:0;
}
</style>
<div id="myID" class="bottomMenu hide">
  <span>build your header here</span>
</div>

Obviously this just does the appearing after scroll, but it's a start, you just need to add links in a flexbox...or similar table layout.