The navigation bar is expanding in the incorrect direction

I'm currently facing some challenges with my Bootstrap Navbar. It was working perfectly a few months ago, but now it's behaving oddly, and I can't figure out why. The main issue is that when I try to expand the Navmenu on smaller window sizes, it opens on the right side instead of below the hamburger icon.

Here is my navigation code:

<div class="menue">
      <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">Kosmetik Asura</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#ueber">Über</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#angebote">Angebot</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#news">News</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#kontakt">Kontakt</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

Could someone assist me in identifying what needs to be changed?

Thank you in advance!

PS: this is on

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

CSS:

/*NAV*/
nav li{
  border-left: 2px solid black;
  font-size: 1em;
}

nav li:hover{
  border-left: 2px solid black;
  box-shadow: inset 0px 0px 5px #000;
}

.navbar{
  background-color: #f2f2f2;
  height: 90px;
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
}


.nav-link{
  width: 150px;
  text-align: center;
}
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

align ul to right

.navbar-nav{
    float: right!important;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous></script>
  <div class="menue>
      <nav class="navbar navbar-expand-lg navbar-light>
        <a class="navbar-brand" href="#">Kosmetik Asura</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation>
              <span class="navbar-toggler-icon></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNav>
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0>
            <li class="nav-item>
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item>
              <a class="nav-link" href="#ueber">Über</a>
            </li>
            <li class="nav-item>
              <a class="nav-link" href="#angebote">Angebot</a>
            </li>
            <li class="nav-item>
              <a class="nav-link" href="#news">News</a>
            </li>
            <li class="nav-item>
              <a class="nav-link" href="#kontakt">Kontakt</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

TO YOUR COMMENT:

I get a black bar on the left of the expanded menu and its somehow transparent.

remove it from your css:

 border-left: 2px solid black;



box-shadow: inset 0px 0px 5px #000;

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

Tooltips envelope around themselves

Several paragraphs contain tooltips, but some of them break onto a new line instead of staying within the text. <div class="row"> ... </div> Fiddle: https://jsfiddle.net/LhjmLw8k/29/ The issue is that certain words like "Trasimeno" and ...

htmlcsstooltip

Initial loading issue with HTML5 Canvas in Android WebView

As I work on developing a HTML5 canvas-based game within a WebView of an existing application, I encounter a puzzling issue. Upon the initial run of the game, everything seems to be in order - logs indicate that it's ready and running, yet nothing is ...

androidhtmlcanvashtml5-canvasandroid-webview

Deactivate the BACKSPACE button

Similar Question: How to disable backspace except textbox using jQuery I am looking for a solution to prevent the BACKSPACE button from functioning unless it is within a TEXT field. Although I have tried the code below, it ends up disabling the backs ...

jqueryhtml

The Form button in my PHP email code is failing to produce any output when submitted

I attempted to create a contact form using a combination of HTML and PHP. Everything was functioning as expected during testing with the code input type="submit" name="submit" value="Submit" However, when I switched to using div and button with the class ...

phphtmlmail-form

Experience the Firefox nightmare with a fixed background-attachment!

I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...

htmlcssfirefox

Having difficulties in loading the CSS file for my real-time chat application built with Express and Socket.io

Hi everyone, I've been struggling with an issue for the past couple of days where I can't seem to load my CSS for my Express app. If anyone has a solution, I would greatly appreciate the help. Below is my server.js code: const express = requir ...

javascriptcssnode.jsexpresssocket.io

Insert a span element before an HTML input using JavaScript

On my webpage, there is an html input inside a div. Here is what it looks like: <input type="text" class="form-control" placeholder="Barcode" role="barcode"> Using JavaScript only, I am trying to add the following code into the DOM above it: <s ...

javascripthtml

Troubleshooting: @keyframes not functioning properly in slideshow

Having trouble getting my image slider to function properly. I want to use it as a header for my page, but the images are not sliding like they should. I've attempted using prefixes for Chrome, but that hasn't solved the issue. <html> < ...

htmlcss

Importing documents from various directories

I am currently developing a webpage that is stored in a separate folder from the main root directory. My goal is to integrate the newsletter.css file, header.php file, and services.jpg image into the page. The specific page I'm working on is located a ...

phphtmlcss

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

Struggling to achieve a captivating overlay effect with a slider using EasySlider 1.7, incorporating both images and corresponding text. However, encountering difficulties in aligning the text correctly on the page. The black overlay visible on the main s ...

jqueryhtmlcsseasyslider

SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg: ...

javascripthtmlcsssvg

Issue with Java HtmlUnit - extracting null href value during website scraping

I'm currently working on a project that involves sending a URL to multiple websites for categorization and security risk scanning using Java and HtmlUnit. I have configured all the websites except www.virustotal.com, where I'm facing a challenge ...

javascriptjavahtmlhtmlunit

Is it possible for me to designate variables as an array element?

<!doctype html> <html lang="en"> <head> <title>Favorite Foods</title> <meta charset="utf-8"> <script> var foodItem0 = prompt("Enter your favorite food"); var foodItem1 = prompt("Enter your second f ...

javascripthtmlarrays

What is the best approach to decrease the size of a button in HTML and CSS when the text size is also reduced?

Check out this code snippet! I'm new to coding, so let me know if you see any errors or ways it could be improved. button { font-size: 10px; font-family: roboto, Arial; color: white; background-color: rgb(59, 102, 241); border-radius: 100p ...

htmlcss

What is the proper way to place a newly added element using absolute positioning?

Currently, I am in the process of developing a tooltip feature. This function involves adding a div with tooltip text inside it to the element that is clicked. However, I am facing a challenge in positioning this element above the clicked element every tim ...

javascripthtmlcss

What is the best way to ensure that <input> and <textarea> placed within a <div> are aligned to the top of the container?

Here is the setup I currently have: <div> <input> <input> <textarea> </div> I am looking to align the tops of the inputs and the textarea within the div. However, it seems like the inputs are at the bottom and the t ...

htmlcss

The navigation elements in the Flexbox are behaving strangely as they overflow in an unexpected way

During my responsiveness testing, I came across a very strange issue. I have code that aligns the header as a flexbox, but when I resize the window to over 900px in width, the navbar moves out of the header and appears on top of the next element. Here&apo ...

htmlcssflexboxmedia-queries

designing a personalized two-row navbar layout in Bootstrap 4

I have been attempting to design a unique custom navigation bar that I haven't come across anywhere else online. Despite my diligent search for examples or solutions, I have not been able to find what I am looking for. Therefore, I am reaching out her ...

jqueryhtmlcsstwitter-bootstrapflexbox

Manipulate the contents of an HTML class using Javascript to substitute text with an empty string

Is there a way to create a JavaScript function that can remove text upon clicking from multiple HTML fields with the same class? I am facing an issue where my function is not clearing the data in the target field when "Yes" is selected in the trigger. Re ...

javascripthtmlgetelementsbyclassname

Instability detected in the image when hovering over and off

Here is a snippet of code from my HTML file: <img id="id1" src="photo1" usemap="#ir" > <img src="photo2" id="id2"/> <span> <map name="ir" id="ir"> <area alt="" title="my title" href="my link" shape="poly" coords="13,15,29 ...

jqueryhtmlcss