Two hyperlinks are not visible

I've added 2 links in my header component, but for some reason, they are not displaying. It's strange because everything appears to be correct. These 2 links are part of a list within a ul element.

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
    <a class="navbar-brand" href="#">Product List</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Product Operations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product Logout</a>
        </li>
      </ul>
    </div>
  </nav
htmlcsstwitter-bootstrap

Answer №1

Your problem seems to be stemming from the div element you have:

<div class="collapse navbar-collapse" id="navbarSupportedContent">

The collapse class is causing your div to be hidden by applying the style display: none (unless .show is added). To resolve this, you should remove the collapse class in order to display your links properly:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
  <a class="navbar-brand" href="#">Product List</a>
  <div class="navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Product Operations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Product Logout</a>
      </li>
    </ul>
  </div>
</nav>

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

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Does IE 9 support Display Tag?

Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...

htmlcssinternet-explorer-8internet-explorer-9displaytag

Fluid Bootstrap Container for x-small and small screens

Is it possible to have the outer-most div container named "container" for md and lg, while using container-fluid for xs and sm without any additional CSS? Any suggestions on achieving this natively? Appreciate your help. ...

twitter-bootstrapbootstrap-4

How can I extract text from HTML tags that contain nested HTML using C#?

<Item> </c>Text i need</c> </c>Text i need</c> </c>Text i need</c> </Item>Text i need</Item> </Item>Text i need</Item> </Item>Text i need</Item> </Item> i need to extract ...

c#htmltexttags

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Welcome to my first post on this platform! I have a new project where I am creating a website for a client who wants to easily embed their own YouTube links. As a beginner in web development, this is my first paid task and I'm curious about how I can ...

phphtmlsqldatabasevideo-embedding

HTML: Checkbox not responding to unchecked value... malfunctioning

I am encountering an issue with setting the Checked / Unchecked value of a checkbox. The problem I'm facing is that when the checkbox is unchecked, it returns an empty string. Any thoughts on how to solve this? Here's what I have done so far: ...

javahtmlbootstrap-4thymeleaf

Is there a way to modify the CSS display property upon clicking a link or button?

I have a ul with the id of "menu-list". The display property is set to "none" in my CSS file, but I want it to switch to "flex" when a link is clicked. I am trying to use the click event on the link to change the display prop ...

javascriptcssdisplay

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...

javascripthtmlcsstypeahead

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

htmlvue.jsvuejs2

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...

javascriptcssvue.jstailwind-cssvue-select

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

In my PHP page, there are 12 individual forms with unique form IDs, checkboxes, and dropdowns. Take a look at this image: https://i.stack.imgur.com/pODzk.png Each form has an Update Zone that fetches Name, Enable status, Time, Dim information, and sends ...

javascriptphpjqueryhtmlajax

"Create a dynamic box grid with varying heights using the responsive design features of Bootstrap

I have been attempting to create a responsive grid consisting of 6 textboxes using the box class and bootstrap. My issue is that due to varying amounts of text in each textbox, they end up with different widths/heights. However, I want them all to have th ...

csshtmltwitter-bootstrapbootstrap-4

There is a gap found in the span element in Angular, but this gap is not seen in

Comparing two component templates, one in AngularJS and the other in modern Angular: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon ap ...

javascripthtmlangularangularjs

Stop the endless scrolling of the carousel and keep it fixed in place

I'm having trouble with disabling auto scrolling even though I've set bs-interval to "false". Here's my code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfem ...

htmlcssbootstrap-5

Implementing Clockwise Padding with React Material-UI

Can Mui Box utilize shorthand properties for padding in a clockwise syntax? Unfortunately, this method does not work and results in a syntax error. <Box padding = {2 1 1 2}/> ...

cssreactjsmaterial-ui

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

cssvue.jssass

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

I've been struggling to remove the white padding in this select box for a while now. I've tried countless variations and places to tweak the CSS with no success. Any suggestions on how to make it disappear? The project is using MUI 5, and I even ...

javascriptcssreactjsmaterial-uifrontend