WordPress Navbar Theme Development

WordPress Navbar

WordPress Navbar is an important part of WordPress website layouts or theme design for beginners. Who want to know how to create a WordPress Navbar for his or her newly created theme. I want to show them a simple way to create a WordPress Navbar. Dear WordPress Developer, first open your header.php file and create a div like as below.

<div class="nav" >
</div>

Above created div should be put in header section.  Also see the below code.

<div class="header">

<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</div>

<div class="nav" >

In this section your navigation button 
or links are shown. Here we write a php code that will
bring the navigation links.
</div>

Finally, the code of your  header section  code is like as below. So, follow this code.

<div class="header">

<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</div>

<div class="nav" >

<?php wp_nav_menu(); ?>
</div>

Furthermore, Copy above code and paste them to your header.php file and save it. Also you can watch the videos.

Most of all, you need some css code to style the navigation and looking nice. Here is the css code.

/*Main Menu CSS*/
.nav { background-color: red; min-height: 50px;}
.nav ul {list-style: none; padding-left: 165px; margin: 0;}
.nav ul li {float: left; 
 text-transform: uppercase; 
 border-right: 3px solid gray; 
 box-shadow: 0px 0px 10px 0.3px;
 position: relative;
 }
.nav ul li a { display: block; text-decoration: none; padding: 10px; color: white; }
.nav ul li:first-child {border-left: 3px solid gray;}
.nav li a:hover {background-color: blue; padding: 10px;}

/*Dropdown Menu CSS*/
.nav ul li ul {position: absolute; left: -999999px;}
.nav ul li:hover ul {left: 0px;}
.nav ul li ul {padding-left: 0;}
.nav ul li ul li{float: none; width: 200px; border-right: 0px solid gray; box-shadow: 0px 0px 1px 0.9px; }
.nav ul li ul li:first-child {border-left: 0px solid;}
.nav ul li ul li a{background-color: red;}

In the conclusion, copy above css code and paste them to your style.css file and save it. Now see your site.

If you have any questions please put a comment in the comments box. Please don’t hesitate to ask me by comments.  Free WordPress Theme.

ABOUT MY TUTORIAL

To learn wordpress theme development tutorial series one after another. You can follow my YouTube  Channel.



Leave a Reply

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