How to Edit custom html Responsive Navigation Bar / navbar in blogger

Responsive Navigation Bar 

Today I'm going to tell you about How to Edit Responsive Navigation Bar or custom navbar in blogger.

Responsive Navigation Bar

If you use custom template in your blog then you have to customize many things in your blog or website like a Responsive navigation bar, side bar etc.

But problem is that many people don't know about coding. If you don't know anything about coding, then it's a big challenge for you to make a responsive navigation bar.

So if you don't know anything about coding then especially this article is for you.

Today I'm going to tell you about how to design your Responsive navigation bar or menu navbar.

So now let's talk about responsive navigation bar.

Related post

How increase blog traffic for free

How to select best keywords for seo

Best advanced seo tips for blogs

What is Responsive Navigation Bar?

Many website developers use responsive navbar at the top of the website or blog.

Do you have any ideas? Why developers use the Responsive navigation bar at the top of the blog?

Because it's helps people to find content or pages easily.

Open any website, there you will see the Home, Contact us, About us pages on the top of the website, this is called Navigation Bar / Menu bar.

Many bloggers also use categories on navbar, that helps people to find categorized content easily.

But it is not necessary to use the Responsive navigation bar only at the top of website or blog, you can use wherever you want.

Top, bottom, right or left you can use responsive navbar wherever you want its all depend on you.


I hope you understand. Now lets talk about. Now let's learn How to Edit Responsive Navigation Bar or Menu Bar in blogger template.

How to Edit Responsive Navigation Bar in blogger template?

By using this method, you can easily create a customize responsive navigation bar on your website or blog.

But before do this method, make sure you have a backup file of template.

To backup your template:

 go to your blogger dashboard >> Theme>> and click on >>Backup/ Restore >> Download Theme

Step1:-
Go to your blogger dashboard >> Theme >> and click on > Edit HTML

Step2:-
You need to find navbar code in Html Editor.

If you want to customize Home, contact us, about us navigation bar code then go to html editor.
Click CTRL + F then you'll see a small search box.

Find out "contact us" in html editor by searching "contact us" in that search box.

Step3:-
Now you can change the "Contact us" name link etc.

If you want to show the "Privacy Policy" page in the navbar then you need to create Privacy Policy page.

And copy the link of that page

How to make a pages?


Before change...
 <a href=’https://www.minetechtips.com/p/contact-us.html’>
lt;span>Contact us</span>
 </a>
After change …
<a href=’https://www.minetechtips.com/p/privacy-policy.html’>
<span>Privacy Policy</span>
</a>


Step4:-
After changes your all navigation bar click on Save Theme button. After the save theme, go to your blog and check it out.


Step5:-
You can change all your 
codes by doing this method. But you need to find navigation bar code.


How to make a Responsive Navigation Bar?

If you want to make a responsive navigation bar for your blog or website then this code is for you.

Use this code in between <body> </ body>


Here are the codes of navbar.

Starts Here…

<nav id=’nav’> 

<div class=’conty’>
       
        <ul class=’nav menubar2′ id=’menu-main’>
          <li>
            <a class=’active’ href=’/’>
             
             <span>Home</span>
            
            </a>
          </li>
          <li>
            <a href=’https://www.minetechtips.com/search/label/blogging‘>
            <span> Blogging</span>
            </a>
            <ul style=’display: none;’>
              <li>
                <a href=’#’>
                 
                </a>
              </li>
              <li>
                <a href=’#’>
                  Fashion1
                </a>
              </li>
              <li>
                <a href=’#’>
                  Fashion2
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href=’https://www.minetechtips.com/search/label/Seo’>
              <span>Seo</span>
            </a>
            <ul style=’display: none;’>
              <li>
                <a href=’#’>
                  Sub Menu 1
                </a>
              </li>
              <li>
                <a href=’#’>
                  Sub Menu 2
                </a>
              </li>
              <li>
                <a href=’#’>
                  Sub Menu 3
                </a>
              </li>
            </ul>
          </li>
<li>
            <a href=’https://www.minetechtips.com/p/contact-us.html‘>
             <span> Contact Us</span>
            </a>
          </li>
          <li>
            <a href=’https://www.minetechtips.com/p/about-us.html‘>
            <span> About Us</span>
            </a>
          </li>
       
          <li>
            <a href=’https://www.minetechtips.com/p/privacy-policy.html‘>
             <span> Privacy Policy</span>
            </a>
          </li>
        </ul>
        <div id=’searchformfix’>
          <form action=’/search’ id=’searchform’>
            <input name=’q’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;Text to Search…&quot;;}’ onfocus=’if (this.value == &quot;Text to Search…&quot;) {this.value = &quot;&quot;;}’ type=’text’ value=’Text to Search…’/>
            <input type=’submit’ value=”/>
          </form>
        </div>
        </div>

      </nav>

….end of code…


Note: Change the name and link of red color and fill with your navbar name and link

You can customize your responsive navigation bar by this method. If you want to add more tabs then you can use this code:

<ul><li>
            <a href=’https://www.minetechtips.com/p/privacy-policy.html‘>
             <span> Privacy Policy</span>
            </a>
          </li></ul>

NoteChange the name and link of red color and fill with your navigation bar name and link

Last words

In this blog we learned about How to Edit Responsive Navigation Bar or Menu Bar in blogger template.

Also we were able to know meaning of Navbar, and we learned a little bit of coding also. 
we learned to make a responsive navigation bar.

I hope you understand.

if you have any doubt then immediately contact me

do you like this post? If you like this then don't forget to share this blog with your friends.

Thanks

best-budget-smartphone-in-world-2019


No comments

Powered by Blogger.