I'm converting an existing site to responsive and I've gotten to the navigation bar. On the old site has a very simple navigation bar with some styling on it. Just a `<ul>` with `<li>` for each item and a nested `<ul>` for a dropdown. It looks like this: [![enter image description here](https://i.stack.imgur.com/22ZrN.png)](https://i.stack.imgur.com/22ZrN.png)

```
<ul id="nav">
    <li><a href="#">Home</a></li>
</ul>

```

Entire fiddle here: <https://jsfiddle.net/t3haykzd/>

I want to make a responsive navbar that looks exactly like this if possible. From what I understand it is bad practice to edit the bootstrap source directly. Looking at bootstraps navbar, I notice it has 2 elements, the `header` and then the menu itself which is an unordered list. 

Is there a simple way to incorporate my current style into this navbar while making sure it's responsive?