Connect with us

How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript

How To Create A Sticky Menu While Scrolling Using CSS/HTML

Blogger

How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript

It is so simple to create a sticky menu using CSS & Javascript for a Blogger blog or for WordPress blog or any website. The benefit of sticky menu or fixed menu is that when visitors scroll down the website they can still view menu at top, so that they won’t scroll up to top of the blog to access the menu.

In this tutorial we will guide you to how to create a sticky menu step-by-step. There are two ways to create:

  • CSS & Javascript(For Builtin Blogger Menu)
  • CSS/HTML(For All – Recommended)

 

1. CSS & Javascript(For Builtin Blogger Menu)

  • This is how the menu looks in a static position.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 1
  •  When you will scroll down, it will move to top.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 2
  • Follow these steps:

 

Step 1:

  • Go to Theme.
  • Click Customize.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 3

 

Step 2:

  • Click Advanced.
  • Click Add CSS.
  • Copy & Paste the highlighted CSS code below on white box and Save.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 4

 

/* ——- CSS Code For Sticky Menu —– */
.tabs
{
}
.sticky {
position: fixed !important;
top: 0 !important;
width: 1298px !important;
z-index: 999 !important;
right:25px !important;
}

.sticky + .main-outer
{
padding-top: 102px !important;
}

  • Note: You can adjust width according to your menu. Normally it is set to 100% like {width:100%;}. You can remove “right “or change its value as well { right:25px;}.
  • “.main-outer” is the class in Blogger from where the content starts below the Header.

 

Blogger Templates

 

Step 3:

  • Click Layout.
  • Click Add a Gadget.
  • Add HTML/JAVASCRIPT Widget.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 5

 

Step 4:

  • Copy & Paste the highlighted Javascript code below.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 6

 

<!– Sticky Menu –>

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById(“crosscol”);
var sticky = header.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
}
}
</script>

<!– Sticky Menu Ends –>

  • Note: “crosscol” is the id of Menu.
  • You can paste this Javascript code inside the template within “body” as well. It won’t work if you put this code inside “header” in template.

 

Step 5:

  • I have moved this widget under the Main section. This code will not appear on your website. Sidebar left-1, Sidebar-right-1 and Main lies inside the “body”. So it is the same thing if you paste directly in template or through layout.
How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 7

 

Now Refresh your website and scroll down to see whether it is working or not.

 

2. CSS/HTML Sticky Menu

How To Create A Sticky Menu While Scrolling Using CSS/HTML or Javascript | Blogger, WordPress | Fixed Menu 8
  • Paste this code on your header section.
————————————————————————-
<style>

.menu {

background-color: black;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
left: 0;
}

.menu a
{
display: inline-block;
padding: 6px;
text-decoration: none;
color: white !important;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.menu a:hover
{
color: orangered!important;
}
</style>

<!– Menu Starts Here –>

<div class=”menu”>
<a href=”https://www.meersworld.net”>Home</a>
<a href=”#”>TECH</a>
<a href=”#”>E-ONLINE</a>
<a href=”#”>LEARN</a>
<a href=”#”>IDEAS</a>
</div>
<!– Menu Ends Here –>

———————————————————————————-

 

 

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

Your email address will not be published.

More in Blogger

To Top