The Navbar design in Bootstrap is not scaling properly with the background image, making

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.

Answer №1

Check out the updated code with explanations included.

<!DOCTYPE html>
<html lang='end'>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051b0519">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
  <style>
    .bg-image {
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center 0%;
      background-image: url('https://images.unsplash.com/photo-1600210491369-e753d80a41f3?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODczNDI0OTN8&ixlib=rb-4.0.3&q=85');
      height: 760px;
    }
    .navbar {
      height: 6rem;
    }
    .top-nav {
      padding: 0px 70px;
    }
  </style>
</head>
<body>

<header>
  <div class="bg-image">
    <nav class="navbar">
      <div class="container-fluid border border-danger top-nav">
        <a class="navbar-brand text-dark" href="#"><h2>Lelisoft</h2></a>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            English
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">Cesky</a></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </div>
      </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>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5f8e5fb">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Issues resolved and solutions:

  1. The excessive margin was removed by adjusting the padding using a custom class "nav-top". You can modify the padding values according to your needs.

  2. A dropdown component was utilized to address the menu problem. Bootstrap's Components section can provide guidance on implementing various elements.

  3. The hero section's background image positioning was centered horizontally and aligned to the top. You can adjust the vertical positioning by modifying the background-position property.

  4. The width of the outer div containing the heading was limited to enhance the layout. Adjust the width percentage as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS exhibiting variations on similar pages

Although the pages look identical, they are actually pulled from the same template file in Drupal but have different URLs. nyc.thedelimagazine.com/snacks In my document head, I've included a style rule that overrides a stylesheet further up the casc ...

What is the best way to integrate ng-bootstrap into an nx mono repository?

Encountering an issue when attempting to install ng-bootstrap in a multi-project mono repo using Nx. The error message received is as follows: npx ng add @ng-bootstrap/ng-bootstrap --project=web-app The add command needs to be executed in an Angular proje ...

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly. Below is the animation code: @keyframes fadeInUpBig { 0% { ...

Solving alignment issues by utilizing a clever negative margin-left technique for compact windows

I've managed to center-align a div using the following method: <div id="container" style="position:absolute; top:0px; left:50%; margin-left:-500px; width:1000px;"></div> After referring to this solution Trying to center div horizontally ...

Creating a vertical scrollable container that spans the full height of the PDF document

I am currently working on embedding a PDF file into my website. I'm trying to hide the status bar, including download buttons and page numbers, through some clever techniques so that I can control them externally. My goal is to be able to redirect use ...

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: https://i.sstatic.net/WR55a.jpg Managed to get it done using position absolute and @media screen for image size and padd ...

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

Does jQuery's click event not successfully hide an element on Internet Explorer?

In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

Is there a way to get rid of the tiny black line beside the Instagram icon?

Here is the display on my website This is the code that was used I am struggling to identify the source of the small black "-" line next to the Instagram icon logo. ...

Setting the child elements of a CSS div to have the same width and be larger than the

Welcome everyone to my inaugural post! I hope I've followed the right steps. I'm encountering an issue where I have child divs that need to have equal widths. The #content can sometimes exceed the browser window's width (hence the 3000px), ...

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/百度云同步盘/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the ...

What causes the border to trigger the appearance of a scrollbar due to an overflow?

The first image display a scrollbar, while the second one does not. It all comes down to the .tabulator CSS class and specifically the border property. How come only a 1px border impacts the scroll feature instead of affecting the entire content? https: ...

Direct your attention towards the bootstrap dropdown feature

I have encountered an issue with using a bootstrap dropdown. I need to focus on the dropdown in order to navigate through its options using the keyboard. However, my current attempt at achieving this using jQuery does not seem to be working when I use $(&a ...

What is the largest image dimension allowed for website use?

What are the dimensions in pixels and file size in MB? I've been curious about this for a while, appreciate any insights! ...

Ensure that the tooltip remains visible within the confines of the page

In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents: .tooltip-master { position: relative; .tooltip ...