Create Beautiful Custom Horizontal Menu with Bootstrap 3

I’m still having fun to use the bootstrap framework for build responsive website. I will share my custom horizontal menu. My horizontal menu has 2 navbar in the top. On the top navigation bar consists of brand image, date and name of the user with a dropdown menu. The second navbar we can set a link page or another menu. Second navbar will collapse when browser resolution change into mobile resolution. lets see my horizontal menu preview below

preview create horizontal menu with bootstrap 3 - part 1

preview create horizontal menu with bootstrap 3 ,mobile display

preview create horizontal menu with bootstrap 3 - toggle menu colapse

Okay, here’s the script how to create a horizontal menu with bootstrap 3 and custom css

1. Make sure you have downloaded the bootstrap framework 3 here
2. Make sure you have downloaded the font awesome here
3. Create index.php as php file and copy the script below

4. Create style.css as css file and copy my custom css below

You can check my demo horizontal menu with bootstrap here

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.