How can I have my nav bar always visible, without scrolling down first?

172
May 18, 2018, at 6:10 PM

My nav bar is hidden, until I scroll down the page, then it appears. I want it to always be visible, without the need to scroll down first. I am not sure if it is the css or the javascript that causes this. I am trying to add the code and it says that my post is ostly code, please add some more details, so I guess I'll just write some more words here so I can add the code. Thank you for your help!

<!doctype html> 
<html> 
 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head> 
 
<body> 
 
<header> 
	<nav> 
		<div class="mobile-nav"> <a class=""><span class=""><img src="" alt="" /></span></a> 
		</div> 
		<div class="desktop-nav" role="navigation"><a href="">HOME</a><a href="">ABOUT</a><a href="">SERVICES</a><a href="">WORK</a><a href="">CONTACT</a> 
		</div> 
	</nav> 
</header> 
 
</body> 
 
</html>

#nav { 
  text-align: justify; 
  height: 50px; 
  padding: 0 25px; 
  background: #222; 
  color: #f0f0f0; 
  z-index: 1000; 
  position: fixed; 
  top: 0; 
  width: 100%; 
  transition: all 0.3s; 
  visibility: hidden; 
  opacity: 0; 
  backface-visibility: hidden; 
  -webkit-transform: translateZ(0); 
  transform: translateZ(0); 
} 
 
#nav nav a { 
  padding: 0 1em; 
  white-space: nowrap; 
  letter-spacing: 1px; 
  font-size: 0.8em; 
  -webkit-transition: color 0.1s; 
  transition: color 0.1s; 
} 
 
 
#nav nav a:last-child { 
  padding-right: 0; 
} 
 
#nav .mobile-nav a { 
  font-size: 1.5em; 
} 
 
#nav>div { 
  height: 100%; 
} 
 
#nav>div h1 { 
  font-size: 1.5em; 
  vertical-align: middle; 
} 
 
#nav>div::before { 
  content: ''; 
  height: 100%; 
} 
 
#nav::after { 
  content: ''; 
  display: inline-block; 
  width: 100%; 
} 
 
#nav.show { 
  opacity: 1; 
  visibility: visible; 
} 
 
#nav>div,#nav>div::before,#nav nav,#nav>div h1 { 
  display: inline-block; 
  vertical-align: middle; 
} 
 
@media only screen and (min-width: 768px) { 
  #nav .mobile-nav { 
    display: none; 
} 
   
@media only screen and (max-width: 768px) { 
  #nav .desktop-nav { 
    width: 100%; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    visibility: hidden; 
    height: 0; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
  } 
 
  #nav .desktop-nav a { 
    display: block; 
    padding: 1.2em 25px; 
    background: rgba(0,0,0,0.9); 
    border-bottom: #222 1px solid; 
    border-top: #000 1px solid; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: background 0.5s; 
    transition: background 0.5s; 
  } 
 
  #nav .desktop-nav a:hover { 
    background: rgba(10,10,10,0.9); 
  } 
 
  #nav .desktop-nav.nav-open { 
    visibility: visible; 
    height: 263px; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
  } 
 
  .z #nav .desktop-nav.nav-open { 
    height: 310px; 
  }

(function(b) { 
    b.fn.appear = function(e, a) { 
        var f = b.extend({ 
            data: undefined, 
            one: true, 
            accX: 0, 
            accY: 0 
        }, a); 
        return this.each(function() { 
            var d = b(this); 
            d.appeared = false; 
            if (!e) { 
                d.trigger("appear", f.data); 
                return 
            } 
            var i = b(window); 
            var j = function() { 
                if (!d.is(":visible")) { 
                    d.appeared = false; 
                    return 
                } 
                var g = i.scrollLeft(); 
                var h = i.scrollTop(); 
                var w = d.offset(); 
                var B = w.left; 
                var o = w.top; 
                var z = f.accX; 
                var A = f.accY; 
                var x = d.height(); 
                var y = i.height(); 
                var u = d.width(); 
                var v = i.width(); 
                if (o + x + A >= h && o <= h + y + A && B + u + z >= g && B <= g + v + z) { 
                    if (!d.appeared) { 
                        d.trigger("appear", f.data) 
                    } 
                } else { 
                    d.appeared = false 
                } 
            }; 
            var c = function() { 
                d.appeared = true; 
                if (f.one) { 
                    i.unbind("scroll", j); 
                    var g = b.inArray(j, b.fn.appear.checks); 
                    if (g >= 0) { 
                        b.fn.appear.checks.splice(g, 1) 
                    } 
                } 
                e.apply(this, arguments) 
            }; 
            if (f.one) { 
                d.one("appear", f.data, c) 
            } else { 
                d.bind("appear", f.data, c) 
            } 
            i.scroll(j); 
            b.fn.appear.checks.push(j); 
            (j)() 
        }) 
    }; 
    b.extend(b.fn.appear, { 
        checks: [], 
        timeout: null, 
        checkAll: function() { 
            var a = b.fn.appear.checks.length; 
            if (a > 0) { 
                while (a--) { 
                    (b.fn.appear.checks[a])() 
                } 
            } 
        }, 
        run: function() { 
            if (b.fn.appear.timeout) { 
                clearTimeout(b.fn.appear.timeout) 
            } 
            b.fn.appear.timeout = setTimeout(b.fn.appear.checkAll, 20) 
        } 
    }); 
    b.each(["append", "prepend", "after", "before", "attr", "removeAttr", "addClass", "removeClass", "toggleClass", "remove", "css", "show", "hide"], function(f, e) { 
        var a = b.fn[e]; 
        if (a) { 
            b.fn[e] = function() { 
                var c = a.apply(this, arguments); 
                b.fn.appear.run(); 
                return c 
            } 
        } 
    }) 
})(jQuery); 
(function(f) { 
    f(window).load(function() { 
        if (f(window).scrollTop() > 100) { 
            f("header").addClass("show") 
        } 
        e() 
    }); 
    f(document).ready(function() { 
        c(); 
        i(); 
        g(); 
        j(); 
        a(); 
        h(); 
        d(); 
        k() 
    }); 
    f(window).resize(function() { 
        i() 
    }); 
 
    function e() { 
        f("body").addClass("page-loaded") 
    } 
 
    function c() { 
        var m = f("header"), 
            n = f("nav .desktop-nav"), 
            l = f("nav .mobile-nav"), 
            p = {}, 
            o; 
        l.click(function() { 
            if (n.hasClass("nav-open")) { 
                n.removeClass("nav-open") 
            } else { 
                n.addClass("nav-open") 
            } 
        }); 
        f("nav").on("click", ".desktop-nav.nav-open a", function() { 
            n.removeClass("nav-open") 
        }); 
        f("#header,#about,#services,#works,#contact").each(function() { 
            var q = f(this); 
            p[q.prop("id")] = { 
                top: q.offset().top, 
                bottom: q.offset().top + q.outerHeight() 
            } 
        }); 
        b(p, n); 
        f(window).scroll(function() { 
            if (!o) { 
                o = setTimeout(function() { 
                    if (f(window).scrollTop() > 300) { 
                        m.addClass("show") 
                    } else { 
                        m.removeClass("show") 
                    } 
                    b(p, n); 
                    o = null 
                }, 400) 
            } 
        }) 
    } 
 
    function b(n, o) { 
        var l = f(window).scrollTop(), 
            m = o.find("a.active").length > 0 ? o.find("a.active").attr("href").replace("#", "") : ""; 
        loop1: for (var p in n) { 
            if (l >= n[p].top && l <= n[p].bottom) { 
                if (m != p) { 
                    o.find("a").removeClass("active"); 
                    o.find('a[href="#' + p + '"]').addClass("active") 
                } 
                break loop1 
            } 
        } 
    } 
 
    function g() { 
        f('a[href^="#"]').click(function(l) { 
            l.preventDefault(); 
            f("html, body").animate({ 
                scrollTop: f(this.hash).offset().top 
            }, 800) 
        }) 
    } 
 
    function i() { 
        f(".js-full-height").height(f(window).height() + 6) 
    } 
 
    function a() { 
        var l = f(".js-service a"); 
        l.click(function() { 
            var m = f(this), 
                n = m.attr("id").replace("service_", "content_"); 
            l.removeClass("active"); 
            m.addClass("active"); 
            f("#service_content p").hide(); 
            f("#" + n).removeClass("hide").fadeIn(500) 
        }) 
    } 
 
    function h() { 
        if (f(window).width() > 768) { 
            f(".bar-fill").css("width", 0); 
            f(".skill").appear(function() { 
                var m = f(this).find(".bar-fill"), 
                    l = m.data("percent"); 
                m.css("width", l + "%") 
            }) 
        } 
    } 
 
    function j() { 
        f(".appear").appear(function() { 
            f(this).addClass("appeared") 
        }) 
    } 
})(jQuery);

READ ALSO
issuewith single,double quotes inside string in php [duplicate]

issuewith single,double quotes inside string in php [duplicate]

This question already has an answer here:

165
Ternary operator and string concatenation quirk?

Ternary operator and string concatenation quirk?

Hi I just want to know why this code yields (at least for me) an incorrect result

163
Download media file from twilio in php [on hold]

Download media file from twilio in php [on hold]

I am getting record sid from twilio but how can i get real media file from twilio using php

201