Bootstrap Responsive Navigation in WordPress Theme


 In this article, We will create Bootstrap Responsive Navigation in WordPress theme. In the previous article, we will register the navigation menu. Now we will create Bootstrap responsive Navigation in WordPress. We will style our Wordpress navbar with the style.css file.

Bootstrap Responsive Navigation in WordPress Theme

Before we start you should have a basic understanding of CSS and Bootstrap. You will see, In the previous few articles will demonstrate how to link bootstrap file and also register navigation in functions.php file. So now the time is to create Bootstrap Responsive Navigation in WordPress.

We just create a nav tag in the previous article. So replace this with this bootstrap navigation code in header.php.

In this code, we had created a nav with the navbar class and also add navbar-dark and ba-dark bootstrap class. This class will create dark black navigation. After that, we had created a simple anchor tag of navbar brand and also added a toggle button.

When you resize the window you will see the toggle button on the right side. Click on it and you will see your navigation items.

Now we want to create a style for this navigation. So we will create it in the style.css file.

First, we will remove all the margin and padding from the HTML and body elements.

Import this code and you will see your navigation will work on every device. If it is mobile or pc this navigation will work fine.

Now we will insert some code for footer also.

You will see your footer also looks beautiful.

Everything was created now. So now you header.php file looks like this.

header.php

Style.css

Now you will see your WordPress website little bit look like a website now. But we want to create more amazing things so stay tuned.

If you have any question then you can comment me in the comment section. If you want to follow us on youtube also.

We will see you in the next article.

Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *