collapsed icon sliding over navigation slider in mobile Bootstrap 4

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded justify-      content-center">
 <div class="container ">
<button class="navbar-toggler navbar-toggler-right" type="button"   data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"   aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon m-auto"></span>
</button>

<div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active mt-5">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)   </span></a>
     </li>
    <li class="nav-item mt-5">
    <a class="nav-link" href="#">About Us</a>
  </li>
  <li class="nav-item mt-5">
    <a class="nav-link" href="#">Gallery</a>
    </li>
  </ul>
   <a class="navbar-brand" href="#"><img src="_images/logo.png" alt="logo"></a>
    <ul class="navbar-nav ml-auto">
    <li class="nav-item active mt-5">
       <a class="nav-link" href="#">Services <span class="sr-only">(current)</span></a>
    </li>
     <li class="nav-item mt-5">
       <a class="nav-link" href="#">Events</a>
      </li>
     <li class="nav-item mt-5">
    <a class="nav-link" href="#">Contact Us</a>
     </li>
    </ul>

   </div>

this is the code I used for my website's navigation menu incorporating Bootstrap design elements.

    <header>
    <div id="carouselExampleIndicators" class=" carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">

            <div class="carousel-item active" style="background-image: url('_images/Slider_1.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h3>First Slide</h3>
                    <p>This is a description for the first slide.</p>
                </div>
            </div>

            <div class="carousel-item" style="background-image: url('_images/Slider_2.jpg')">

                <div class="carousel-caption d-none d-md-block">
                    <h3>Second Slide</h3>
                    <p>This is a description for the second slide.</p>
                </div>
            </div>

            <div class="carousel-item" style="background-image: url('_images/Slider_3.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Third Slide</h3>
                    <p>This is a description for the third slide.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</header>

I am facing an issue where the slider overlaps the collapsed navigation button icons when viewed on mobile devices. Since I'm new to using Bootstrap, any suggestions on how to fix this problem would be greatly appreciated. Apologies for any language errors.

htmlcssbootstrap-4

Answer №1

Alright, let's get started,

To solve the issues you are facing, remove the justify-content-center class from the nav tag in your HTML code. Afterwards, apply the following CSS to correct the problems:

.navbar{
  min-height: 60px;
}
.navbar .container{
  width: 100%;
}

Check out img1

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

Is your PHP, MySQL array not displaying properly in a single HTML table despite multiple queries being made?

I found a code snippet on this website, which I utilized as shown below $data = array(); while($row = mysql_fetch_assoc($num1)) {$data['row'][] = $row;} while($row = mysql_fetch_assoc($num2)) {$data['row2'][] = $row;} $count = ...

phpmysqlarrayshtmlmultidimensional-array

When the height of the div is fixed, vertical alignment in the middle won't work as intended

Check out the code snippet below: .fixed-height { height: 100px; background-color: green; } .fixed-height h1 { font-size: 14px; color: red; display: inline; vertical-align: middle; } <div class="fixed-height"> <h1>VERTICAL ALI ...

htmlcssvertical-alignment

Unlocking the power of AngularJS scopes

I am currently in the learning stages of AngularJS and am working on a personal project that involves fetching JSON data and displaying it on an HTML page using AngularJS. The main objective is to have two columns, "rules" and "servername", with checkbox i ...

javascriptjqueryhtmlangularjs

Using inline-block can be effective on certain occasions

Hi everyone, I'm currently facing a puzzling issue and not sure what's causing it. Sometimes the elements I've set as inline-blocks cooperate as expected, but then when I refresh the browser, they suddenly decide to misbehave. Below is my ...

css

Determining the location of the hamburger item on the bar

As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would cent ...

htmlcsssass

What is the best way to duplicate an image on both sides in a vertical manner?

I've successfully implemented a background image on the left side of the website, however, I'm facing difficulty in replicating the same effect on the right side of the webpage. <style> body { background-image: url('background. ...

htmlcss

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

htmlangularangular-reactive-forms

.Net RadioButton object

Having trouble styling my radio button. When I compile and check the code with Firebug, something unusual happens. Code snippet: <asp:RadioButton ID="selType1" GroupName="Type" runat="server" CssClass="radioB" Checked="true" /> Firebug result: & ...

.netasp.netcss

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

Footer not positioned at the bottom of the page

I have been experimenting with different ways to keep my footer at the bottom of the page. Initially, I tried using position: static, but the footer ended up above the bottom of the page and the background was visible (similar to the image below). Then, I ...

htmlcssfooter

Having difficulty creating a popover that is activated by clicking on the three dots, similar to the ones seen in Facebook posts

I have a Django template displaying a list of posts and I want to add three dots to each post. When clicked, a popover should appear with clickable options like Delete and Copy Link. To get a better idea of what I'm looking for, you can reference Inst ...

javascripthtmljquerycssbootstrap-4

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

Having trouble locating and interacting with the final li item in a ul list using Selenium Webdriver in C#

I am working with a chunk of code that resembles the following structure and my objective is to extract the text content (inner html; which should be 4) from the span element located within the button element under the last li. <ul class="xyz" ...

c#htmlselenium-webdriverxpathselenium-chromedriver

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

javascripthtmlcssvue.js

When <ul> elements overflow to the next line in XHTML and CSS

I need to control the display of a list of items (<ul> with <li>'s) by setting a height limit. Consider the following code: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li& ...

htmlruby-on-railscssxhtml

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Currently utilizing the following command with wget: wget --page-requisites --convert-links -e robots=off \ --span-hosts --restrict-file-names=windows \ --directory-prefix=$ASSETS_DIR --no-directories http://myhost/home The HTML page ...

csswget

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...

phpjavascriptmysqlhtmlcss

Difficulties arise when trying to align text vertically between two floating images

After running the code, I noticed that the text "Text Here" is positioned at the bottom of the div instead of the top. I have attempted to adjust it using properties like vertical-align, padding, and margin-top within the .subText styling, but so far, I ha ...

jqueryhtmlcss

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

Dealing with the infuriating combo of Internet Explorer, Bootstrap, and Respond.js

Currently, I am in the process of reimagining my unfinished website using the Racket programming language instead of PHP, which I have grown to not enjoy. The challenge lies in the fact that I cannot simply copy and paste HTML code; Racket utilizes S-expr ...

phpjqueryhtmlinternet-explorertwitter-bootstrap