How to create sticky menu-bar in blogger

Hello Dcoder's, in this post I have shown you how to create sticky menu bar in your existing blogger template. The complete procedure is given below!

sticky menu bar in blogger

1) You need to log in to Blogger.com, then click on the Themes tab, and click Edit HTML. If you are using a blogger's new interface then click on the three-dot menu and then click on Edit Html.

2) Click Ctrl + F in the theme HTML to open the search box, Then search for ]]> </ b: skin>, and paste the code given below above ]]> </ b: skin>.

Copy This Code:

/* Spacing & Border of First Link in Navigation */
.tabs-inner .section:first-child ul {
margin-top: 0px;
border: 0 solid #eeeeee;
}
/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #999999;
border: 0px solid #eeeeee;
text-align: center  !important;
}
/* Font, Colour & Border of Links */
.tabs-inner .widget li a {
font: normal normal 14px Arvo;
color: #333333;
border: 0px solid #ffffff;
}
/* Font & Colour of Rollover Links */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee;
background-color: #ffffff;
text-decoration: none;
}
/* Centre Navigation */
.tabs .widget li, .tabs .widget li{
display: inline;
float: none;} 

3) After all, you need to paste other code to CSS. Path to add CSS "Blogger.com>>Theme>>Customization>>Advanced>>Add CSS".

Copy This Code:

#stickynavbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

4) After entering all the code under CSS, it now moves to the fixed navigation bar. this is very simple. Each template is developed by a different developer. In this case, some developers will mention the navigation menu in the template, while some developers will not. In this case, you need to find the navigation bar in the template.

Step 1: 

  • Go to your homepage, then right-click the mouse and click "Check" or click Ctrl + Shift + C.
  • Click the corner on the title bar.
  • Remember the header element ID.
  • Also, find End Element on the title, and remember this element too.
Step 2:

After finding the Div ID in the navigation bar from start to end. Now, go to the HTML editor.
  • Open the "Search" box by typing Ctrl + F, and enter the navigation/title Div ID remembered in process #1
  • Code: <div id="stickynavbar"> Paste this code before the start of Div ID.
  • Find the same End Div ID from the navigation/title as the previous process
  • Paste </div> after closing Div id.
5) After entering all the code, refresh the page, and then check the CSS fixed title/navigation bar.
However, if you see the correct content after entering any page or post, you will see that the top row of the page or post is hidden under the sticky header CSS.

Now is the main task. You need to customize the border according to the height of the title. You need to add an additional 10px margin from the height of the title. (For example, if the height of the title/navigation bar is 50px, then your margin must be 60px, automatically 0px).

Note: Margin: 60px (from the top) automatically (double-sided) 0px (footer/bottom)

 6) In my template, my title height is 70px, which is why my blank: 80px automatically 0px
This is a simple process to find the CSS height of the fixed header/navigation bar, and also replace the body margin with perfect margins

  • Go to your homepage, right-click the mouse, and click Check.
  • After opening the "Inspection" tab, click "Select Element" (you can find the upper left corner in the "Inspection" page)
  • Click on the title/navigation bar
  • Click on the highlighted area of the inspection page
  • Scroll down in the style bar of the check page and remember "fix the height of the header CSS"
  • Open the HTML editor and find the body {(You must enter a space between the body and the second bracket)
  • Change the margins based on your fixed header CSS (I have discussed the process above this)
Congratulations! Your normal title/navigation bar is only converted to a fixed/sticky title/navigation bar through CSS.
   
If you encounter any problems, please comment here.
I have been with you, my friends. Thank you!

Avoid abusing comments. Peace ✌️ ✌️

Post a Comment

Avoid abusing comments. Peace ✌️ ✌️

Post a Comment (0)

Previous Post Next Post