Combining the navigation bar and carousel in Bootstrap 4

Is it feasible to combine the carousel and navbar in a similar manner as demonstrated here: .

I attempted to place the carousel within the nav element, but it didn't appear to work as expected. Here is the HTML code I used:

  <div class="navbar navbar-expand-lg navbar-light"">
      <a class="navbar-brand" href="#">WeDesign</a>
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
          </ul>
        </div>
    </div>
  </div>

  <div id="" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
htmlcssbootstrap-4

Answer №1

This solution functions similarly to the provided link.

a {
  color: black !important;
}

a:hover {
  color: black !important;
}

.navbar {
  z-index: 10;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="navbar" style="background-color: transparent;">
  <a class="navbar-brand" href="#">WeDesign</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
    </ul>
  </div>
</div>

<div style="position: absolute; top: 0px; left: 0px;" id="" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1e011e1e0b1c40041d2e5f405f58405e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

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

Linking issue with href tag

I am having trouble with my download links for PDFs of my Chinese articles. I've tried different approaches, but none of them seem to work. I even attempted linking it to my homepage as a test, but still no luck. <link href="http://unique-domain.c ...

html

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

javascriptjqueryhtmlcssuikit

Exploring the application of AJAX value within inline HTML using JINJA

My flask server responds to an AJAX call with data, which I then display dynamically in my html using the ids of the elements. Now, I want to take it a step further and change the color of the html component based on the value returned. I attempted to us ...

htmlajaxflaskjinja2

What causes the checkbox toggle to require two clicks instead of one?

Currently in the process of creating a checkbox along with an attached label. The for attribute is used to connect the click for the checkbox. There is also a jQuery function that triggers a slide toggle for a text input field on clicking the checkbox and ...

jqueryhtmlcheckbox

Creating an HTML table using PHP: A step-by-step guide

Here is a snippet of code that utilizes the explode function to separate values: <?php $data=array(); $Inputfile = file("prod.txt"); foreach ($Inputfile as $line){ $pieces = explode(";", $line); echo $pieces[0]; echo $pieces[1]; echo $piece ...

phphtmlhtml-table

Is it possible to access an image's width and height in Jekyll Liquid syntax while iterating through a for loop, and then convert it to a JavaScript variable?

Is there a way to define a variable in Liquid logic that captures an image's width and height, which can then be passed to a JavaScript variable later on? Below are the steps my website takes before reaching the point where I need to use the image si ...

javascriptjqueryhtmljekyllliquid

Creating a standard text input with full validation and error management in ReactJS

Currently, I have an input Textbox where the "type" is being set from my Props. I am looking for assistance in implementing validation and error handling for this textbox based on the props provided. For instance, if type=email is specified in the props, ...

javascripthtmlreactjs

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

My HTML code has a <ul> element with the following structure: <ul id="messages"> </ul> In my HTML file, I have not specified any <li> items. However, in my JavaScript code using jQuery, I dynamically add <li> items to the & ...

javascriptjquerycss

What is the process for saving the data from a checkbox selection into a file using PHP?

Here is the content of my text file: 12345 234 455 23 67 9666 13 56 1234 777 900 Whenever I select the preferred check-boxes, only the first value of each line appears. The other values do not appear. For example, only 12345 appears from the fi ...

phphtmlcssfilecheckbox

trigger a function when the iframe is altered

I am currently working on creating a function that can process credit card payments using an iframe. The challenge I am facing at the moment is dealing with error messages appearing in a less than ideal manner. Photo: I have been attempting to capture the ...

javascriptjqueryhtmliframe

Guide on aligning search icon at the center of bootstrap navigation bar

I am facing issues with 2 things: How can I position the search bar on the left side of the desktop, as shown here, and prevent this from happening on small devices? When the screen size is small, a button is displayed to show the list. However, when I cl ...

htmlcssreactjsbootstrap-4

Retrieve all corresponding CSS values from the provided string

I have a CSS file in Shopify with the following styles: @font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") ...

phpcssstringextractstring-matching

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

Identify regions with clickable functionality within an <img> element in an Ionic application

I have a static image with various buttons like Main, F1, F2, etc. within it that need to be made clickable in order to call an API. I am looking for suggestions on how to achieve this scenario. Any assistance would be greatly appreciated.https://i.sstat ...

htmlangularcordovaionic-frameworkui-automation

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

javascriptjqueryhtmlcss

Node.js causing issues with executing jQuery front-end code properly

I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...

jqueryhtmlcssnode.jsexpress

Hide React micro animations on component using display:none

Is there a way to make this component appear on button click with a smooth ease-in expand or popout animation? I'd like the transition to be smoother rather than it just appearing suddenly. const CardExample = () => { const [show, setShow] = use ...

javascriptcssreactjscss-animationscss-transitions

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

htmlcssblocktilemosaic

Angular2 - the pipe was not located while organizing records

I've successfully fetched data from an API and displayed it in the view, but I'm struggling to organize the data by date. Whenever I attempt to do so, I encounter this error message: The pipe 'groupBy' could not be found pipe.ts impor ...

htmlangulartypescriptionic-framework