I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges.
Here is the design I am working from:
https://i.sstatic.net/MsFzq.jpg
Here is my current progress:
https://i.sstatic.net/2CU9Z.jpg
The first issue I am facing pertains to the navbar. I am having difficulty aligning the elements at the same distance from the edges as outlined in the design. The second issue is that when I open the menu, it shifts to the top and left.
https://i.sstatic.net/YOdAh.png
The third issue concerns the height of the hero section. I would like it to be taller to display the full image.
Lastly, I am struggling with the width of the headings. I would prefer them to wrap on larger displays.
Below are snippets of my source code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bg-image {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-image: url('../assets/images/bg/hero-section-image-bg.jpg');
}
.navbar {
height: 6rem;
}
</style>
</head>
<body>
<header>
<div class="bg-image" style="">
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand text-white m-auto" href="#"><h2>Lelisoft</h2></a>
<ul class="navbar-nav m-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="../assets/images/icons/us-flag.svg" alt="english" width="32">
English
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item text-white" href="#">
<img src="../assets/images/icons/cz-flag.svg" alt="cesky" width="32">
Cesky
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div style="padding: 200px 0 200px;">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white" style="background-color: rgba(0, 0, 0, 0.6);">
<h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
<h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
</div>
</div>
</div>
</div>
</header>
I am uncertain if I am following the correct approach. As I am not well-versed in CSS, I would appreciate any guidance or advice to help me resolve these issues.