<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=c38a016e-dee3-47b6-9bed-d53091a1fda6' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=c38a016e-dee3-47b6-9bed-d53091a1fda6' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body class='is-post is-single single-id-4638887060433304701' data-lang='default' data-theme='default' id='nB'>*/</style>

ANUTRICKZ

How to Make Sticky Navigation Bar While Scrolling in any Blogger Template

how to,sticky navigation,how to make a sticky sidebar,blogger,sticky navigation bar,sticky header,how to create sticky sidebar on scroll,sticky header on scroll,how to create sticky widget in blogger,how to make sticky header bar,best trick to make any blogger widget sticky,sticky side navigation/side bar on scroll

How to Make Sticky Navigation Bar While Scrolling in any Blogger Template

Anupam January 08, 2020 - 1 min read

There are a lots of websites or blog where you can see their navigation bar starts floating on top. Some site make it fix forever and some site make it appear after you scroll down the page, this technique allow you to keep showing the categories or other services that hide after visitor scroll down.

After following the steps of this post, your current Blogger navigation bar or menu bar become sticky

How to Make Sticky Navigation Bar

1.First of all login to your blog and go into Template>Edit Template

2. Add this css in above </b:skin> or inside menu css

3. After Put This JavaScript on above </body> tag

pls note* replace "menu-wrap" with your approprieate nav id. like { nav,css-menu, etc}

Download CSS and Javascript

3. And it has been done! Visit your site and see the changes 😊

If you found this post useful, please share it because Sharing is Caring 😊.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2726972568-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6Vk6CYjc6iPKMiV8_pvBoFa5rPpQ:1750743684943';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2020/01/how-to-make-sticky-navigation-bar.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2020/01/how-to-make-sticky-navigation-bar.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2020/01/how-to-make-sticky-navigation-bar.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/4638887060433304701/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/58dd893ab884e281', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '4638887060433304701', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IgLT1tfrg6zl9lFmo022QrTiEo_a0VvjKnvHsYy24J-T_SATDjcJrC0XBzeZT-FSjtxXgsaUQDtoPrbbdC1LuPF0smI8mt1d1ztVGi1CafReLh5sXc86vUKssYuZxXBvtrkhNfsphXk/s72-c/maxresdefault+%25281%2529.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IgLT1tfrg6zl9lFmo022QrTiEo_a0VvjKnvHsYy24J-T_SATDjcJrC0XBzeZT-FSjtxXgsaUQDtoPrbbdC1LuPF0smI8mt1d1ztVGi1CafReLh5sXc86vUKssYuZxXBvtrkhNfsphXk/s640/maxresdefault+%25281%2529.jpg', 'pageName': 'How to Make Sticky Navigation Bar While Scrolling in any Blogger Template', 'pageTitle': 'ANUTRICKZ: How to Make Sticky Navigation Bar While Scrolling in any Blogger Template', 'metaDescription': 'how to,sticky navigation,how to make a sticky sidebar,blogger,sticky navigation bar,sticky header,how to create sticky sidebar on scroll,sticky header on scroll,how to create sticky widget in blogger,how to make sticky header bar,best trick to make any blogger widget sticky,sticky side navigation/side bar on scroll'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Make Sticky Navigation Bar While Scrolling in any Blogger Template', 'description': 'how to,sticky navigation,how to make a sticky sidebar,blogger,sticky navigation bar,sticky header,how to create sticky sidebar on scroll,sticky header on scroll,how to create sticky widget in blogger,how to make sticky header bar,best trick to make any blogger widget sticky,sticky side navigation/side bar on scroll', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IgLT1tfrg6zl9lFmo022QrTiEo_a0VvjKnvHsYy24J-T_SATDjcJrC0XBzeZT-FSjtxXgsaUQDtoPrbbdC1LuPF0smI8mt1d1ztVGi1CafReLh5sXc86vUKssYuZxXBvtrkhNfsphXk/s640/maxresdefault+%25281%2529.jpg', 'url': 'https://anutrickz.blogspot.com/2020/01/how-to-make-sticky-navigation-bar.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4638887060433304701}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'content', 'id': 'Blog1', 'posts': [{'id': '4638887060433304701', 'title': 'How to Make Sticky Navigation Bar While Scrolling in any Blogger Template', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IgLT1tfrg6zl9lFmo022QrTiEo_a0VvjKnvHsYy24J-T_SATDjcJrC0XBzeZT-FSjtxXgsaUQDtoPrbbdC1LuPF0smI8mt1d1ztVGi1CafReLh5sXc86vUKssYuZxXBvtrkhNfsphXk/s640/maxresdefault+%25281%2529.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar-section', 'id': 'HTML1'}, {'title': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'sidebar-section', 'id': 'PopularPosts2', 'posts': [{'title': 'How To Add Custom Google Translate Button On Your Website?', 'id': 5371994812086292964}, {'title': ' Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ] ', 'id': 9130507176988353748}, {'title': '[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes', 'id': 4111069201761851050}, {'title': 'How To Add Custom Google Translate Button On your Website?', 'id': 6486639804398665261}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-section', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'sidebar-section', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>*/</style>