Navbar problem in html

General Questions
1

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/

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
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 */
2

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.

3

You might find it more helpful to use a framework like Tailwind or Bootstrap.

4

You’re probably right.
But I have no idea how to convert my website (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 :slight_smile: