\
**Category:** Questions\
**Tags:** navbar\
**Created:** [January 8, 2025, 10:26pm UTC](https://forum.pinegrow.com/t/navbar-problem-in-html/10212 "2025-01-08T22:26:35Z")\
**Posts on this page:** 4\
**Page:** 1
**Author:**  [@Laurens](https://forum.pinegrow.com/u/Laurens)\
**Post date:** [January 8, 2025, 10:26pm UTC](https://forum.pinegrow.com/t/navbar-problem-in-html/10212/1 "2025-01-08T22:26:35Z")
Hi, I have a HTML website for bible study.
Now I have Pinegrow, I wanted to make it more responsive, so I created breakpoints and am busy to change the parameters for every breakpoint.
Started at phone size, now I am at 1024. For the smaller sizes I want to change the navbar to hamburger menu, but that is for later.
For now I want to have the navbar working like in this page: [https://bijbelopen.org/](https://bijbelopen.org/)
I created a kind of test page with some html in it which I use often, with it’s own css (bible\_test.css)
This is the link to the test page: [Welkom bij Bijbel Open](https://bijbelopen.org/Testpagina-voor-css.html)
As you can see the navbar is not the same as in the original site.
I tried to find solutions, but I couldn’t get it right.
I tried also the next css, but didn’t help either.
Anyone here to have a solution?
Much appriciated!
.nav {
float: left;
font-size: 1.1em;
width: 70%;
padding-top: 0px;
margin: 10px;
padding-right: 0px;
padding-bottom: 0px;
}
```
.nav ul {
padding: 21px 17px 10px 21px;
margin: 1% 1% 1% 1%;
list-style: none; /* Remove bullet points */
display: flex; /* Make list items horizontal */
justify-content: flex-start; /* Align items to the left */
}
.nav li {
margin-top: 0.8%;
margin-right: 20px; /* Add space between menu items */
display: inline-block; /* Make list items horizontal */
}
.nav a {
padding-left: 3%;
padding-right: 3%;
text-decoration: none; /* Optional: removes underline from links */
```
---
**Author:**  [@Laurens](https://forum.pinegrow.com/u/Laurens)\
**Post date:** [January 11, 2025, 4:26pm UTC](https://forum.pinegrow.com/t/navbar-problem-in-html/10212/2 "2025-01-11T16:26:39Z")
In the mean time there is so much changed in this css that the question is not relevant anymore.
I still have a problem with the navbar but at the moment it is not urgent.
I don’t know how to do it, but this topic can be deleted.
---
**Author:**  [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\
**Post date:** [January 12, 2025, 9:18am UTC](https://forum.pinegrow.com/t/navbar-problem-in-html/10212/3 "2025-01-12T09:18:07Z")
You might find it more helpful to use a framework like Tailwind or Bootstrap.
---
**Author:**  [@Laurens](https://forum.pinegrow.com/u/Laurens)\
**Post date:** [January 12, 2025, 10:30am UTC](https://forum.pinegrow.com/t/navbar-problem-in-html/10212/4 "2025-01-12T10:30:03Z")
You’re probably right.
But I have no idea how to convert my website ([www.bijbelopen.org](http://www.bijbelopen.org)) to Tailwind or Bootstrap.
Are there tuturials how to do that?
And how much work is it? As you can see I have lots of pages. But actually it’s a very basic structure. Head with logo and Navbar, then a section with an orange bar with the subject text. Then just text and at the end ofcourse the footer.
I am currently busy to make the website better responsive with @media and clamp. I do that on a webpage which containt all the tags a.s.o. I’m better in understanding the Bible then Pinegrow. But I’m learning 🙂