A picture is worth a thousand words. I am making a web CV with HTML, CSS, Bootstrap and JQuery. The case that the menu (Get to know more about me) disappears when I put it in responsive, I don't know why. It keeps me functional, yes, but it disappears. I have no idea why this is happening. Any ideas? On the other hand, as you can see, when you put it in responsive, the cards do not appear centered but are adjusted to the left. I've tried to center them with margin: 0 auto
but it doesn't work for me and I really don't understand why it does that, since on other screens that I have an accordion it adjusts it to the entire screen.
I leave here the code of the menu in question:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
GET TO KNOW MORE ABOUT ME
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="html/about-me.html">ABOUT ME</a>
<a class="dropdown-item" href="html/technologies.html">TECHNOLOGIES</a>
<a class="dropdown-item" href="html/soft-skills.html">SOFT SKILLS</a>
<a class="dropdown-item" href="html/languages.html">LANGUAGES</a>
<a class="dropdown-item" href="html/values.html">VALUES</a>
<a class="dropdown-item" href="html/behavioral-questions.html">BEHAVIORAL QUESTIONS</a>
<a class="dropdown-item" href="html/academic-background.html">ACADEMIC BACKGROUND</a>
<a class="dropdown-item" href="html/professional-experience.html">PROFESSIONAL EXPERIENCE</a>
<a class="dropdown-item" href="html/entrepreneurship-experience.html">ENTREPRENEURSHIP EXPERIENCE</a>
<a class="dropdown-item" href="html/faq.html">FAQ</a>
</div>
</ul>
</div>
And I also leave the code of some letters:
<div class="row title">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active link-title" href="#">TECHNOLOGIES</a>
</li>
</ul>
</div>
<div class="row col-4-xl col-4-lg col-4-sm col-12">
<div>
<div class="card card-tech card-left" style="width: 350px;">
<img src="../img/html5-blue.png" class="card-img-top non-expand" alt="HTML5 Logo">
<div class="card-body">
<h5 class="card-title">HTML</h5>
<p class="card-text">Advanced level.</p>
<p class="card-text">Professional experience: 2 months.</p>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
Any ideas how I can fix both issues? Thanks.
You have opened an item
li
but not closed it.Look at the part in your code that says
<li class="nav-item dropdown">
.That's messing with your code, and that's why it doesn't behave as it should. And that's also why the rest of the elements are thrown out of whack, as you say.
Also, you should note that Bootstrap 5 has already been released and attributes
data
have a-bs-
. If you are creating something new you should use Bootstrap version 5 as it comes with great advantages.Fixed code: