# Navigation Bar from scratch

**URL:** <https://community.hubspot.com/t/navigation-bar-from-scratch/36909>\
**Category:** CMS Development\
**Created:** [May 7, 2021, 9:10am UTC](https://community.hubspot.com/t/navigation-bar-from-scratch/36909 "2021-05-07T09:10:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshdev99](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/joshdev99/32/28756_2.png) [@joshdev99](https://community.hubspot.com/u/joshdev99)\
**Post date:** [May 7, 2021, 9:10am UTC](https://community.hubspot.com/t/navigation-bar-from-scratch/36909/1 "2021-05-07T09:10:57Z")

</div>

Hello guys I am new in HubL CMS development. I want to build a navbar from scratch but when I try to, css styles wont apply. I am using the Hubspot boilerplate. Thanks

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [May 7, 2021, 4:05pm UTC](https://community.hubspot.com/t/navigation-bar-from-scratch/36909/2 "2021-05-07T16:05:08Z")

</div>

Hey @joshdev99 !

Might need to add some code so we can see what you are up to. Because I yelled at @Anton for another post you did, I will yell at him again 😀

He is not half bad at this HubSpot development stuff

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 7, 2021, 4:53pm UTC](https://community.hubspot.com/t/navigation-bar-from-scratch/36909/3 "2021-05-07T16:53:13Z")

</div>

Hi @joshdev99,

if you want to build an own nav-bar:  
- create a new HTML file(if you want as global-partial but in this case it shouldn’t be necessary)

- work with the grid system(HubSpot still uses Bootstrap 2 by default) you’d like to create the layout you want. If you want to work with something else e.g Bootstrap4 modify the base.html file  
- use the [menu module](https://developers.hubspot.com/docs/cms/building-blocks/modules/default-modules#menu) and other modules to create the desired menu. Info: Mega-menus are a \*\*bleep\*\* of a custom job and this is something that needs a lot of custom work. If you want to create a mega-menu I recommend you to create a custom module for this - it’s definitly not an easy job. @dennisedson: idea 😁

- add your classes to the HTML file

- create a new CSS file with all of your stylings(or write them - for test purposes - directly into the theme-override.css)

- add the CSS file into the main.css file or after the main.css and theme-override.css in the base.html

Hope this helps,

best,

Anton

@dennisedson - not half bad at this HubSpot dev stuff…😶 thank you. Rather tell me how i can use giphy in the community 😎