Navigation Bar stay on top

Assalamualaikum and hello buddies.. ;-) Well, the title seem weird though..huhu Don't mind it
What I really mean about the navigation bar is it will stay on top of the webpage when you scroll your blog passing the navigation bar. If you had no idea what's I am talking about, VIEW IT HERE.

I don't know how to make a tutorial about this actually, because the code required your self modification to make it work for your blog.
If the navigation does not seem to perfectly suit your blog, you may need to edit the position, margin, size, or padding.

Firstly, Log in your blogger account.
Go to Dashboard > Layout > Add a Gadget ( Below header ) > HTML/JavaScript

Copy below code and paste it on the HTML/Javascipt content.
If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<head></head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('nav')
else
$('#sticky').removeClass('nav');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
<style>
/* Custom Tabs
----------------------------------------------- */
#navigation {
left: 0px;
position: absolute;
background-color: #F7CDFF;
background-image:url( http://colourlovers.com.s3.amazonaws.com/images/patterns/3827/3827607.png);
width: 100%;
margin-top: 0px;
text-align: center;
z-index: 999;
height: 40px;
}

#nav {
left: 0px;
position: absolute;
width: 100%;
padding-top:5px;
text-align: center;
z-index: 999;
}

#nav a {
font-weight:bold;
width:90px;
background-color: #B4E3C8;
border: 2px solid #F1D5CF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#222222;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-top:5px; padding-bottom:5px;
display:inline-block;
}

#nav a:hover {
border: 2px solid #DFA3A3;
color: #B49F80;
background-color: #C7F4E0;
}

#sticky {
background-color: transparent;
padding: 0px;
width: 100%;
}

#sticky.nav {
position: fixed;
top: 0px;
left: 0px;
opacity: .5;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#sticky.nav:hover{
opacity: 1;
}
</style>
<center>
<div id="navigation"><div id="nav"><div id="nav-anchor"><div id="sticky">
<a href="https://LINK">HOME</a>
<a href="https://LINK">ABOUT</a>
<a href="https://LINK">TUTORS</a>
<a href="https://LINK">EXTRAS</a>
<a href="https://LINK">THEME</a>
<a href="https://LINK" >LINKIES</a>
</div></div></div></div>
</center>

After you paste the code, save it.

The Note :
Color code here

Red Text : Background URL find HERE
Blue Text : Background Color
Orange Text : Border Color
Fuchsia Text : Text Color
Green Text : Link URL
Purple Text : Link Title

All done now, see the result on your blog
Do comment dear for any inquiries or request ^^,

KAWAII LADY ♔

Monday, 25 July 2016

Navigation Bar stay on top

4 comments: