The color of the nav bar link is not displaying correctly within the Bootstrap framework

I have been attempting to modify the link color on the nav-bar, but despite making changes, it appears unchanged. What could be causing this issue? Here is the code snippet:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">

  <a class="navbar-brand" href="#page-top">
    <span class="d-block d-lg-none">Start Bootstrap</span>
    <span class="d-none d-lg-block">
      <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
    </span>
  </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">
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#education">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#interests">Interests</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#awards">Awards</a>
      </li>
    </ul>
  </div>

</nav>

CSS 

.bg-primary {
  background-color: #BD5D38 !important;
}

,
.nav-link {
  color: #222222 !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: #ffffff;
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh;
  }
  #sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: 0.5rem;
  }
  #sideNav .navbar-brand .img-profile {
    max-width: 10rem;
    max-height: 10rem;
    border: 0.5rem solid rgba(255, 255, 255, 0.2);
  }
  #sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
  }
  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item {
    display: block;
  }
  #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
    display: block;
  }
}

Despite modifying the .nav-link class, the change is not reflecting. The nav-link class is within the a tag. I prefer not to use a tags for specifying hover and link colors as other links on my site will have unique colors while only nav-links should have this specified color. Hence, I am attempting to utilize the nav-link class for this purpose. How can I resolve this issue? Thanks in advance!

htmltwitter-bootstrapcssbootstrap-4

Answer №1

It seems like there is an unnecessary comma after closing .bg-primary in your CSS. Currently, it appears as follows:

.bg-primary {
  background-color: #BD5D38 !important; },

To fix this issue, you should remove the comma at the end so that it reads:

.bg-primary {
  background-color: #BD5D38 !important; }

The presence of the comma might be causing problems with the subsequent lines of code. Additionally, using important in your color CSS is preventing the hover, focus, and active states from working properly.

Your CSS for the top part should be structured like this:

.bg-primary {
  background-color: #BD5D38 !important; }
.nav-link {
  color: #222222;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {color:#ffffff}

If you are referencing the new beta version of Bootstrap 4, make sure to be more specific and include .navbar-dark .navbar-nav like so:

.bg-primary {
  background-color: #BD5D38 !important; 
}
.navbar-dark .navbar-nav .nav-link {
  color: #222222;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:active {
  color:#ffffff
}

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

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Guidance on displaying values from one PHP file in another PHP file

Is it possible to achieve this scenario? I have two files, named main.php and submenu.php. In main.php, I have the main menu defined as follows: In another file called submenu.php, I have a list structured like this: <ul> <li>1</li> &l ...

phpjavascripthtmlcss

How can I achieve a transparent background for a radio button in Chrome?

Today, I spent some time experimenting with the radio button to see if I could make its background transparent. I attempted the following CSS styling: input[type=radio] { background-color:transparent; background-image:none; -webkit-backface-v ...

htmlcss

Place the text in the middle of the circular image

Trying to add the text "Upload Profile Picture" in the center of a circle image, but it seems to not display when the code is executed. See below for the HTML and CSS code snippet: https://i.sstatic.net/A42rI.png <div class="small ...

htmlcssasp.net

Experiencing problems with the CSS styles after including the file.php in

I have a main PHP page called index.php where all other PHP files are included using index.php?page=example. These pages are located in a separate folder, as shown below: public_html/index.php public_html/css/style.php public_html/pages/ The index.php fi ...

phphtmlcss

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

javascripthtmljsongoogle-chrome-extension

Bootstrap 4 grid system: mixed column widths with fixed and variable, may experience overlapping in IE11"

Dealing with Bootstrap 4 grid challenge in IE11 when using a fixed width column I am working on a three-column grid where the middle column needs to have a fixed width, while the left and right columns are flexible/wrappable. Here is the code snippet I h ...

cssinternet-explorerflexboxbootstrap-4

Issue with Swipe Gesture functionality in Bootstrap 4 carousel

I recently constructed a website using Bootstrap 4.0 and Dreamweaver, featuring multiple carousels. Despite adding the data-touch=”true” attribute to the code, I am facing an issue where the swipe gesture does not work on mobile devices. I am uncertain ...

mobilebootstrap-4carouselswipe

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Highlight the active link in the parent node changes color when the child node is in focus

I've designed a CSS vertical menu with the code provided below. You can view the test page at . The issue I'm facing is that when hovering over the sub-menu items, the highlighted 'li' in the parent node reverts back to the non-hover c ...

cssmenu

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

How can I easily locate the ASP.NET file location of an HTML element within a user interface?

Imagine you're faced with an asp.net page filled with input elements, user controls, and panels, and you've been tasked with modifying a specific textBox. The challenge is that you have no idea where that textBox is located in your project. Typi ...

asp.nethtmlvisual-studioweb-applicationsuser-interface

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...

htmlcss

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

Transitioning a user interface from Excel to ASP.NET

Currently, we have an Excel spreadsheet that is utilized for data collection from users and to populate our database. Now, the need arises to develop an asp.net page to gather this data instead. We are facing some challenges in determining the most effect ...

.netasp.nethtmluser-interface

Get the identification number from a div located within an array of JSON objects using only JavaScript

I've scoured the internet for solutions to my problem, but nothing seems to work as I need it to. I've attempted various methods, including using href and button with the router, but unfortunately, none of them fit the specific requirements in th ...

javascripthtmlnode.jsjson

Adding an extra column to a table on a webpage with Django

Currently, I am in the process of debugging a Django project and my goal is to showcase an additional field from the database within a table on the webpage. The existing Django HTML code for the table displayed on the webpage appears as follows: <tabl ...

pythonhtmldjango

Error message: $(...).tooltip function is not defined in Laravel application utilizing Bootstrap 4 preset

I have been developing an application using the PHP framework Laravel and integrating the Bootstrap 4 preset. After setting up a new project, everything appeared to be functioning correctly including the CSS and dropdown menu from the navbar. However, I en ...

javascriptjquerytwitter-bootstraplaravelbootstrap-4

Execute a function when the submit button is clicked

Here is an example of html text input and javascript code: <input type="text" name="statuspopup" id="statuspopup" value="" /> <script type="text/javascript"> function SubmitTicketForm() { return CheckRequired(); if($('#statuspopu ...

javascriptjqueryhtml

Labels can sometimes cause text input fields to become unresponsive

I've encountered a bug while working on my website with the materializecss framework. Sometimes, inputs are not responding correctly. This issue seems to occur when clicking on the first input and accidentally targeting the higher part of the second ...

javascripthtmlmaterialize