Bootstrap5 closing navbar on click in landing page

HTML & CSS
#1

Hello everybody,
I need some clues about a weird behaviour in Bootstrap5, at least it’s weird to me but maybe the weird side of the problem is me… Anyway:
I’m developing, or trying to, a tiny website with a landing page and some separate sections. I’ve build the landing page via php: it works. I’ve also added in the navbar links to anchors inside the landing page via php; it works. I noticed that, while browsing the page with a small screen the menu covers the upper part of the landing page - which is expected behaviour - and I’m trying to make it disappear at the click of a link: it works adding data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show as suggested here.
But! :confounded:
Now links to internal anchors do not work any longer: I click on any of them and the landing page doesn’t scroll down.

ps :sunglasses:
I also tried various suggestions from other places that forum doesn’t let me link here as I’m a newcomer… but to no avail. :weary:
Any suggestions?
Thanks in advance for your kind attention :upside_down_face:

#2

I do wished you pasted your codes however, this may help:

> <!DOCTYPE html>
> <html lang="en">
> <head>
>     <meta charset="UTF-8">
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <link rel="stylesheet" href="styles.css">
>     <title>Simple Responsive Website</title>
> </head>
> <body>
>     <header>
>         <h1>Welcome to My Website</h1>
>         <nav>
>             <ul>
>                 <li><a href="#">Home</a></li>
>                 <li><a href="#">About</a></li>
>                 <li><a href="#">Services</a></li>
>                 <li><a href="#">Contact</a></li>
>             </ul>
>         </nav>
>     </header>
> 
>     <main>
>         <section>
>             <h2>About Us</h2>
>             <p>This is a simple responsive website example.</p>
>         </section>
> 
>         <section>
>             <h2>Our Services</h2>
>             <p>We offer various services to help you succeed.</p>
>         </section>
>     </main>
> 
>     <footer>
>         <p>&copy; 2024 My Website</p>
>     </footer>
> </body>
> </html>

This page is responsive for various screen size, you make all the changes in the style.css file:

in the @media area

Here is an example that works with the html code provided.

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 1rem;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 1rem;
}

section {
margin-bottom: 2rem;
}

footer {
text-align: center;
padding: 1rem;
background: #333;
color: #fff;
}

@media (max-width: 600px) {
nav ul li {
display: block;
margin: 0.5rem 0;
}
}

You change the @media (max-width: “* your screen size”) {
**your contents here

}

  • This can vary the size you want such as 800px, 1200px, 1400px and so on.
    ** In this area you can set the font size, color etc for each screen size.

Hope this helps. Also, if you need further help, try ChatGPT free and you can learn by asking questions to coding.

#3

Many thanks for your answer. I am well aware I should have copied some content in my question, but I thought it useless as it is pure bootstrap and moreover - to my constant while useless regret - I’m a lazy guy.
I have found this is actually a common bootstrap behaviour, I mean collapse messing with internal links, and by now have gone with a temporary workaround by putting a button to manually collapse the menu. Also asked chatgpt as you suggested: had an answer telling me to try using a bootstrap class but could not copy it as firefox went suddenly nuts and now I have an answer about problems with scrolling, which actually works.
I’ll try again…

Sponsor our Newsletter | Privacy Policy | Terms of Service