How to Edit custom html Responsive Navigation Bar nav bar in Blog
Responsive Navigation Bar
Today I'm going to tell you about How to Edit Responsive Navigation Bar or custom navbar in blogger.
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
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.
Best budget smartphone in 2019
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 == "") {this.value = "Text to Search…";}’ onfocus=’if (this.value == "Text to Search…") {this.value = "";}’ type=’text’ value=’Text to Search…’/>
<input type=’submit’ value=”/>
</form>
</div>
</div>
</nav>
….end of code…
<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 == "") {this.value = "Text to Search…";}’ onfocus=’if (this.value == "Text to Search…") {this.value = "";}’ 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>
<a href=’https://www.minetechtips.com/p/privacy-policy.html‘>
<span> Privacy Policy</span>
</a>
</li></ul>
Note: Change 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
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
Post a Comment