Guidelines for creating a navigation item using Bootstrap's CSS

Hey there, I have everything working perfectly except for one thing - I can't seem to figure out how to style the text "Profile" to look like the standard Bootstrap nav-item. The "Payments" section is a good reference for what I'm aiming for.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../mainStyle.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>

<body>
  <!-- Navigationbar -->
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Payments <i class="fas fa-receipt"></i></a>
      </li>
      <!-- Profile -->
      <li class="nav-item">
        <span class="nav-link">
          <a href="#yourlink">Profile </a>
          <i class="fas fa-user dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown"></i>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#editprofile">Edit Profile <i class="fas fa-user-edit"></i></a>
            <a class="dropdown-item" href="#logout">Logout <i class="fas fa-sign-in-alt"></i></a>
          </div>
       </span>
      </li>
    </ul>
  </nav>
</body>

htmlcssbootstrap-4navigationnav

Answer №1

If your intention is to keep the Profil link in the same color, you can simply add the class nav-link to your <a> tag.

Make sure to include the <i> tag within the anchor so that clicking on the icon also triggers the dropdown menu.

UPDATE: To maintain everything on a single line:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#yourlink">Profil 
    <i class="fas fa-user" href="#" id="navbardrop2" ></i>
  </a>
  <div class="dropdown-menu dropdown-menu-right">
     <a class="dropdown-item" href="#edit">Edit Profile <i class="fas fa-user-edit"></i></a>
     <a class="dropdown-item" href="#logout">Logout <i class="fas fa-sign-in-alt"></i></a>
   </div>
</li>

The current highlighting color comes from Bootstrap's default styles, but by adding the specified class, it will adopt those styles instead.

Add the dropdown-toggle class and data-toggle="dropdown" attribute to the <a> tag to activate the dropdown when Profil is clicked.

The downward arrow symbol will be generated by Bootstrap's pseudo-class :after.

Answer №2

It is required to utilize the navlink class within the anchor tag.

<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>

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

Creating a color-changing checkbox toggle in Bootstrap 5

Is it possible to customize the color of a Bootstrap 5 switch without changing it site-wide? I want some checkbox switches to have a unique color. Most tutorials online only cover how to change colors globally or use images, but I'm hoping to achieve ...

htmlcsstwitter-bootstrapbootstrap-5

Internet Explorer 9 is implementing a conditional stylesheet designed for IE7

In order to address certain issues with older versions of Internet Explorer, I have included additional stylesheets as follows: <!--[if IE 8]> <link rel="stylesheet" href="/CallCentre/ServiceCloud/Content/IE8.css"> <![endif]--&g ...

htmlcssconditional-comments

What is the best way to assign a secondary name to a form field in Django python forms?

My website features a form that is dynamically generated using a python loop to call each field by its variable name. The following is the snippet of HTML code used: {% csrf_token %} {% for form_field in task_form %} <div class ="wrap-input2 vali ...

pythonhtmldjangoformsmodel

Disappearing Act: How to Use Bootstrap Navbar to Hide Menu Items

Looking for a way to rearrange the elements in a standard bootstrap menu into the stack button when the screen size changes. <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <a class="navbar-brand" href="#">Top navbar</a&g ...

javascripthtmlcssbootstrap-4

Using Javascript to retrieve the selected value from a dropdown menu does not return any results

Struggling to retrieve the selected value from a drop-down list using JavaScript? Even when an item is chosen, do you keep getting 'null' as the result? Let's take a look at the HTML page: <select class="mySelect"> <option val ...

javascripthtmlselectdrop-down-menugetelementbyid

Any ideas on how to achieve a text overflow effect with css?

Is there a way to create a text overflow effect? I'm currently displaying information in an MUI Card with a fixed width. Below is the code snippet: cardContent: { fontWeight: 700, color: "#0E0E0E", fontSize: "16px", ...

cssmaterial-ui

I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...

cssreactjsmaterial-uistyles

Flex Container Fails to Rearrange When a Flex Item is Dragged Away

Currently, I am using CSS3 flex boxes along with jQuery UI for drag and drop functionality. One issue I am facing is that when I apply justify-content:space-around;, dragging a flex child outside of the container does not cause the remaining items to rear ...

jqueryhtmlcssjquery-uiflexbox

Tips for creating a React Table where one element spans the entire cell

Hello, I am trying to make my td element tag occupy the entire cell belonging to that column. The current output I have is shown in this screenshot: https://i.sstatic.net/erPJC.png Essentially, I want the "Independent Study" to take up the first column. H ...

javascripthtmlcssreactjs

How to create a resizable dialog box with dynamic height using

I need assistance with dynamically adjusting the height of a jQuery UI Dialog based on its contents. Below is my current code snippet: $( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&amp;id="+productID+"' wi ...

javascriptjqueryhtmljquery-dialog

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

jqueryhtmlcsscordova

Incorporating headers and footers on every page

I am looking to incorporate a header and footer on all my pages. I attempted to do this using jQuery, but unfortunately, it was unsuccessful. Since I am using nodeJS on the backend, do you have any recommendations for implementing this without causing an ...

htmlnode.js

What are the steps to replicate a node that includes an Angular selector using TypeScript?

My Angular app has a peculiar issue. In one component, my HTML includes a selector of another component within a div like this: <div id="header"> <selector> Text Content </selector> </div> When I try to clone this d ...

htmlcssangulartypescriptcss-selectors

JavaScript hovering drop-down feature

Hi there, I'm just starting out with javascript and could use some help with a simple script. I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hove ...

javascriptjquerycss

"The issue lies in the JSON Array failing to display accurate content when the link is

I have implemented a functionality to bring in JSON data using Ajax & Jquery. The loaded data consists of various objects including: ID, TITLE, PERMALINK, CONTENT, ETC.(The rest is not important) My goal is to display each CONTENT object separately base ...

jqueryhtmljson

Utilizing Jquery to toggle collapsed divs with a click event

Here is how my HTML appears: <h3><a href="#" title="story title">Story Title</a> <img class="expandstory" src="/images/plus.png" /></h3> <div class="description">Short description about the story</div> <h3 ...

jqueryhtml

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

I am attempting to implement functionality where one expansion panel closes when another is opened. By default, the multi attribute is set to "false" and it works perfectly when using multiple expansion panels within an accordion. However, in this case, I ...

htmlcssangulartypescriptangular-material

Utilize class attributes inherited from a separate SCSS file

I am attempting to inherit the characteristics of a class called AClass from a file named A.scss into another file, B.scss, and make some changes to its properties based on my needs Let's assume that A.scss contains: .AClass{ border-radius: 20px; ...

htmlangularsassscss-mixins

Webpack is failing to load the logo PNG image file

Is there a way to make the logo png file visible on the webpage? I have been encountering issues with loading the image while other elements like HTML, css, and fonts are loading properly when the web pack is started. List of Error Messages: Refused to a ...

javascripthtmlcsswebpack

Access the Smarty variable directly from the HTML code rather than through PHP

CODE EXAMPLE: <html><body> {section name=a loop=$items} {$items[a].title} {include file="/directory/showstuff.html" video=$items[a]} {/section} </body> </html> PHP SETUP: $pid = '12'; $items = $cbvid->get_c ...

phphtmlsmarty