The navigation bar is not suitable for this situation

Navbar Image :

Expected Result :

Actual Result :

Can you help me fix this?

Here is my navbar code:

<nav class="navbar navbar-default navbar fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">NavbarBrand</a>
                </div>
                <nav class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">A</a></li>
                    <li>A</li>
                </ul>
            </div>
        </nav>
htmlcssbootstrap-4

Answer №1

a:link {
  color: gray;
}
.nav-link:hover {
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="nav bg-dark text-white>
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

Make sure to also check out this fiddle.

If you want the navbar in the middle of the page, use 

<ul class="nav justify-content-center">
. For positioning the nav on the right side of the page, use 
<ul class="nav justify-content-end">
. To learn more about Bootstrap's navigation components, visit basenav.

Answer №2

<div class="navigate">
    <div class="navigate__container">
        <div class="navigate__container_logo">
            NavBrand
        </div>
        <nav class="navigate__container_nav">
            <ul class="navigate__container_nav_list">
                <li class="navigate__container_nav_list--item">
                    <a href="#">link_1</a>
                </li>
                <li class="navigate__container_nav_list--item">
                    <a href="#">link_2</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

.navi{
  padding: 10px;
  &__contain{
    display: flex;
    align-items: center;
    border: solid 1px #000;
    border-right-color: transparent;
    border-left-color: transparent;
    padding: 5px 20px;
    &_logo{
      max-width: 100%;
    }
    &_menu{
      flex: 1;
      max-width: 100%;
      &_list{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &--item{
          margin-right: 10px;
          > a{
            color: #000;
            font-size: 12px;
          }
          &:hover{
            >a {
              color:#f90;
            }
          }
        }
      }
    }
  }
}

Answer №3

HTML

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img class="logo horizontal-logo" src="LOGO link" alt="logo">
      </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

body {
  background: #f2f2f2;
}

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-menu {
  margin-top: 0;
}

JS

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.find($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.find($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

Answer №4

Greetings, after reviewing your code I noticed that I have previously resolved a similar issue for another individual. To assist you with the alignment problem in your navigation system, I created a simple navigation setup on CodePen. Additionally, I identified three unnecessary lines of code in your HTML file, including 

<div class="container-fluid">
, <li>A</li>, and 
<nav class="navbar navbar-default navbar fixed-top">
.

It is not required to explicitly label the navigation bar in your HTML as such. By using the <ul> and <li> tags, which represent an unordered list by default, you are essentially creating a navigation bar. Furthermore, I included CSS code to address the alignment issues and eliminate any unnecessary white space within your navigation.

The navigation bar provided in the following link does not rely on Bootstrap tools; it is constructed solely using CSS and HTML. I believe this resource will be beneficial to you

Feel free to visit the link below: [https://codepen.io/X_Viperxz72/pen/zYrEZGB]

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

What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...

htmlcssnavigation

The sample Ajax XML code provided by W3Schools is ineffective

While studying xml parsing in ajax on w3schools.com, I came across an example that functioned perfectly online. However, when I saved it to my desktop as abc.html and note.xml, the XML values weren't displaying. Even though the HTML elements were vis ...

javascripthtmlxmlajaxdom

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

htmlcsstwitter-bootstrap

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

The size of <dropdown lists> in Safari 5.0.5 for Windows

While developing a web form, everything seemed to work perfectly in Firefox 4 and 3.6, Chromium 11, Opera 11.10, and IE 8. However, in Safari 5.0.5 for Windows, all <select> elements appear wider, causing the layout to break. A comparison screenshot ...

csswebformssafari

Exploring how to display JSON objects containing spaces in an HTML table

Sorry if this question has been asked already, but I can't find the answer. I'm brand new to html/java/django and struggling with a seemingly simple issue. I am developing a web application that retrieves json data from firebase using python/pyre ...

pythonhtmljsondjango

Do css classes consistently provide a solution to issues with style overrides?

Would it be more beneficial to utilize css .class instead of #id to avoid issues with style overriding and importance? #content ul li a {font-size:10px} #content .demo ul li a {font-size:15px} ...

css

Positioning two divs to the right of another div

I am facing an issue with aligning the menu and categories divs to the right of the logo div in the following example: jsfiddle. I want them to remain stacked one under another as they are currently, but I am unable to achieve the desired display. Any ass ...

css

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

JQuery Load fails to load in real-time

I have a PHP file where I am using JQuery to load the content of another file called 'live.php' which should display the current time, but for some reason it is not loading live. Can anyone help me troubleshoot this issue? It used to work perfect ...

phphtmljquerytimetrending

Retrieve identification details from a button within an ion-item located in an ion-list

<ion-list> <ion-item-group *ngFor="let group of groupedContacts"> <ion-item-divider color="light">{{group.letter}}</ion-item-divider> <ion-item *ngFor="let contact of group.contacts" class="contactlist" style="cl ...

javascripthtmltypescriptionic-framework

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

After browsing through similar questions, I couldn't find the answer I was looking for. As a newbie in programming experimenting with JavaScript Progress Bar, I encountered an issue where the progress bar would pause and the counter wouldn't coun ...

javascriptjqueryhtml

Shrink Table Column Size with Bootstrap and Stylus to Optimize Space Usage

Currently experimenting with Bootstrap to ensure my table is responsive on a search list I am developing. However, I am facing an issue where two of my columns are taking up more space than necessary. In the image below, you can see that Date and Link colu ...

htmlcssangularjstwitter-bootstrapstylus

How to Handle Empty Input Data in JQuery Serialization

Having an issue with a form that triggers a modal window containing another form when a button is clicked. The second form includes an input field and send/cancel buttons. The goal is to serialize the data from the modal form and send it to a server using ...

javascriptjqueryajaxhtmlforms

Center Your Text Vertically on Google Sites

Trying to spice up my Google Sites page, I decided to take matters into my own hands and customize the banner at the bottom of the site. My goal was to create an orange rectangle with two lines of text perfectly centered both horizontally and vertically. D ...

htmlcssvertical-alignmentgoogle-sites

Centering an icon vertically and introducing animation upon hovering over an image

I'm having difficulty with vertically centering an icon that drops down on image hover, and I want to make its transition smoother. Currently, it's dropping down too abruptly and no matter what transition property I apply (ease, ease-out, etc.), ...

htmlcsspositioncss-transitions

Tips for including a wildcard in a MySQL query while using the '=' operator

I am working with pre parameters that determine the input for my query. For one scenario, I need to search for all UUIDs, while in another situation, I only want to look for specific UUID numbers. Instead of splitting this into two separate calls as shown ...

phphtmlmysql

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

htmlcssbootstrap-5

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

javascripthtmlcssfullscreen

Show a notification when utilizing AJAX requests

I consist of two separate files: one written in PHP and the other one in JavaScript and HTML. PHP file : <?php session_start(); //start session $_SESSION['data'] = "The content should be displayed as alert in the JS file"; JS/HTML File: & ...

javascriptphpjqueryhtmlajax