Troubleshooting Website Navigation Bar and Layout with HTML, CSS, and Bootstrap5

I am facing a challenge with navbar positioning.

  1. My navbar items are missing after adding the image below. I have attempted to adjust the element positions but to no avail :(
  2. I also tried to create a fixed-top navbar, but it didn't work either :(

I struggle with positioning, so I hope someone can guide me on how to resolve this issue.

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Nav</title>

       <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <style>
        
        .carousel-item{
            height:32rem;
            background:url(https://picsum.photos/200/300);
            color:white;
            position:relative;
            top:0;
        }

        .container{
            position:absolute;
            bottom: 0;
            left: 0;
            right:0;
            padding-bottom: 50px;
        }

        nav{ 
            min-height: 6vh;
            background-color: black;
            position: fixed;
            top: 0;
            overflow: hidden;
            width: 100%;

        }

        nav .navbar-nav{
          position:relative;
        }

        nav .navtoggler .navbar-toggler-icon{
          background-color: white;
          color:lightgray;
          margin-left: 0px;
        }

        nav .logo{
          font-size: 2em;
          text-decoration: none;
          color:white;
          font-weight:bolder;
          font-family:Arial, Helvetica, sans-serif;
        }

        nav .collapse a{
          font-weight: bold;
          font-size: medium;
          color:lightgrey;
          text-transform: uppercase;
          text-decoration: none;
          text-align: center;
          word-spacing: 1px;
        }

        nav .collapse a:hover{
            color:hotpink;
        }

        nav .navbar-nav ul{
          list-style: none;
        }

        nav .nav-link{
            display:flex;
            width:30%;
            letter-spacing: 1px;
            word-spacing: 10px;
        }

        nav .btn{
          border:1px solid hotpink;
          color:white;
        }

        nav .btn:hover{
          color:hotpink;
        }

        .main{
          margin-top: 30px;
        }

      </style>
      
  </head>

  <body>
      <nav class="navbar navbar-expand-lg navbar-lightdark my-3">
        <div class="container ">
          <a class="logo " href="index.html" aria-current="page">
            <img src="img/logo.png" alt="Logo" style="width:50px; height:55px;"class="d-inline-block mt-2">Fit Fit Fitness
          </a>
          <button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggler">
            <!--Related links to other aspects of the website(only for design purpose, not part of the project) -->
            <ul class="navbar-nav ms-auto mb-2">
              <li class="nav-item">
                <a class="nav-link" href="#fp-section2-thelatest">TheLatest</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#fp-section3-workout">Workout</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Food&Nutrition</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Athlete&Celebrities</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Apparel&Gear</a>
              </li>
            </ul>
              <button class="btn btn-small" type="submit">Search</button>
          </div>
        </div>
      </nav>

        <main role="main">
      
         <div class="carousel-item active">
            <div class="container">
              <span class="carousel-artCategory">Food & Nutrition › Weight Loss</span>
              <h1 class="carousel-artTitle">Four Easy Change Ups You Can Do Today To Burn More Fat</h1>
                <p>
                  <span class="carousel-artCite">By Train 
                    <time datetime="2017-02-14"> 14 Jul, 2022</time>
                  </span>
                </p>
                <a href="#" class="btn btn-lg btn-primary">Read</a>
              <a></a>
            </div>
          </div>

        </main>
    
  </body>
</html>

I attempted to include the keyword "fixed-top" in the nav class, but unfortunately, it did not work :( Besides,

Answer №1

By utilizing the CSS property position:absolute;, the element is taken out of the standard document flow, resulting in no space allocated for the element within the page structure. The element is then placed in relation to its nearest positioned ancestor. You can resolve this problem by switching to position:sticky; or removing the line altogether from the container class.

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

Utilizing the Replace function just once

I am currently using the Avada Theme on Wordpress and I am attempting to use jQuery to translate the social media privacy labels/content. Everything is working smoothly except for one issue. Below is the HTML code: function translate() { jQuery(".fus ...

Sorry, I am unable to generate a unique rewrite of the provided text as it is a code snippet and its meaning cannot be changed

I encountered an issue with the bootstrap file while using usemin. When I reference it from the page, it works fine: It works well: Error: undefined:1625 throw new JS_Parse_Error(message, filename, line, col, pos); ^ JS_Parse_Error [SyntaxError]: Invali ...

Trigger a function when a button is clicked

This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...

What is the process for activating a script file once I have replaced HTML content using a backend method?

After receiving HTML content from the backend, including the <script> tags, I noticed that the scripts.js file does not seem to be activated. While the HTML content displays fine, changing the path to style.css successfully alters the appearance of ...

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

Struggling to retrieve a class within an <a> element in jsTree when hovering?

I'm currently utilizing jsTree and below is how I'm initializing it... function setupJSTree(data){ $("#treeSelector").jstree({ "plugins" : ["themes","json_data","UI","types"], "themes" : { "theme":"def ...

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

The range slider initiates with the first alphabet

I have created a range slider with values from 0 to 4, displaying as 0, 1, 2, 3, 4. Currently, the minimum value is set as 0 and the maximum value is set as 4. Now, I am looking to replace 0 with 'F'. For example: F, 1, 2, 3, 4. Is it possible t ...

Issue with Material-UI and React: Changes not visible after using <ThemeProvider>

I've encountered an issue where the "ThemeProvider" tag does not seem to be causing any changes in my project, even when following a simple example like the one shown below. Despite having no errors or warnings in the browser console (except for some ...

What is the best way to align an image with the position of a div?

Looking for assistance on positioning an image to a div's position after it has been cloned. $(".raindrop1").clone().removeClass("raindrop1").appendTo("body"); $("img").css({"left": "div".x, "top": "div".y}); .shape{ border-radius: 50px; width: 10p ...

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

Extracting the 'alt' text from an 'img' tag in Android after clicking a button is causing issues. The attempted code is not working as expected. Here is the snippet of the code that was used: Document doc = Jsoup.connect(url).get(); ...

How can we assign various class names depending on the value of an object?

I have a set of objects stored in my component. I need to dynamically apply different classes based on the value of the ErrorLevel property within each object. If an object has ErrorLevel equal to 1, I want to assign the following classes to various elemen ...

Display XML elements on hover with a Bootstrap tooltip

I am attempting to showcase an XML snippet in my title attribute, similar to the example below. I understand that removing data-html="true" or changing it to false will resolve the issue. However, I also require a label in my title resembling the <stro ...

Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code: function FetchCards() { $("#pack").css('margin-left', 0); $("#pack").css(& ...

What is the best way to assign a class to a child element when the rest of the children are not visible

Looking for a CSS-only solution, I have a simple task involving filtering div elements. The goal is to display an error message when none of the filtered divs match the selected criteria. HTML Structure: <div id="listHolder"> <div class="lis ...

Connecting an image to its corresponding content through hover effect

Can someone please assist me? I am trying to create a hover effect on an image with an "add to cart" link similar to what is shown here: I seem to be having trouble with the code, could you provide some guidance? .hunderter { background: url(http ...

When scrolling, a sticky table cell with a rowspan escapes the confines of the table

I am facing an issue with a table that has both a sticky header and sticky td elements with rowspan. When I scroll, the td with rowspan appears on top of its header, which in this case is the first column. Setting a z-index property puts the header on top ...

Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you. HTML: <div class="first-slot"> <di ...

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...