Customizing Bootstrap navbar classes - ineffective

Having trouble overriding some of Bootstrap's navbar classes. I've tried using !important, but would prefer to avoid it if possible.

This is the HTML I'm working with:

<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a>Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><a href="user/logout">Logout</a></li>
  </ul>
</nav>

CSS attempts that didn't work:

.navbar.navbar-nav li a {
  color: lightgray;
}

.navbar.navbar-nav > li > a {
  color: lightgray;
}

This one worked, even though I'd rather not use !important:

.navbar-nav li a {
  color: lightgray !important;
}

EDIT: CSS calling

  <title># - KoG</title>
  <link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../styles/game/default.css">
</head>
htmlcssbootstrap-4

Answer №1

UPDATE:

This method addresses the specificity issue by overriding the styles provided in _reboot.scss (which is a part of bootstrap).

https://i.sstatic.net/ekhUp.png

Therefore, this solution demonstrates one way to achieve what you desire. Your approach may offer a different way to handle this issue.

For instance, modifying those li elements without href attribute: 

.navbar .navbar-nav a:not([href]) {
  color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav>
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a href="#">Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a><</li>
    <li><a href="user/logout">Logout</a></li>
  </ul>
</nav>

In the following example, using .navbar .navbar-nav a will only affect those a tags with an href attribute.

.navbar .navbar-nav a {
  color: red;
}


.navbar .navbar-nav a {
  color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a href="#">Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><b><a href="user/logout">Logout</a></b></li>
  </ul>
</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

The background image in CSS refuses to display

My CSS background image isn't displaying properly. Here is the code snippet from my HTML: <div class="container-fluid p-c b-g"> <div class="row"> <div class="col-sm-12 text-infom"> </div> </div> </ ...

htmlcssbootstrap-4

Created a custom function that includes a specific target href parameter

I have a website that implements role-based authentication, where the application displayed is dependent on the user's role. The code for this functionality is as follows: <asp:Repeater ID="ui_rprApp" runat="server" DataSourceID="odsApp"> ...

javascriptasp.netchtml

Having difficulty eliminating the gap between the step connector and StepIcon component within the material-ui stepper

I am having trouble removing the space between the step and connector in my code. Despite trying various methods, I have not been successful. Currently, there is a default space between the step icon and connector, but I want to eliminate this space entir ...

cssmaterial-ui

Javascript function that sets the opacity to 0

Hello everyone, I'm new to SO and seeking some guidance on improving my post! I have a function that sets the opacity of an element to 0 in order to clear it. While this works fine, it becomes burdensome when dealing with multiple elements that requi ...

javascripthtmlfunction

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

htmlvue.jsbootstrap-4bootstrap-vue

Hover effect not activating on image within modal

only img:hover is working, but after adding this to the CSS: #user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{ display: block; } it's not working. I changed the class and id names, tried eve ...

htmlcsstwitter-bootstrapbootstrap-modal

How to retrieve data from a form object sent via cloud function using App Script

Currently, I am in the process of developing a web application that can extract files from a web form and store them in a designated Google Drive folder. After the user submits the form, my goal is to trigger a cloud function using google.script.run while ...

javascripthtmlgoogle-apps-script

Tips for keeping the main section from scrolling while scrolling through the side navigation

Within my Angular application, I have implemented a sidenav and a main section. My desired behavior is to prevent any scrolling in the main section while I am scrolling in the sidenav, similar to the functionality seen on the Angular Material Design docume ...

javascriptcssangularjs

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

htmlnode.jslinuxexpressejs

Tips for modifying a biography with PHP

I'm working on a feature that allows users to edit their biography. I want the text stored in the database to show up in the text box, rather than just as a placeholder. How can I achieve this? Currently, the text is set as a placeholder, but my goal ...

phphtml

Dealing with an undefined value in a Json result format: tips and tricks

While attempting to create a search filter, I encountered an error when inserting data type as an integer. I am in need of assistance on how to resolve this issue. Upon diving into the Json GetStringData method where the error occurs, I noticed that &apos ...

c#jqueryasp.net-mvcbootstrap-4

Ways to retrieve attribute value in Selenium python without the use of .get_attribute() method

I am new to posting questions, so please let me know if I need to provide more clarification. I am also a beginner in Python, so I hope that I am using the right terms to phrase my question. Essentially, I have developed a customizable web scraper that re ...

pythonhtmlcssselenium

The user uploads an image to the server, which is then assigned as the background-image for a div element

I am in search of a straightforward method to allow users to upload an image to my server and then use that uploaded image as the background-image for a div element. I need the image to be actually uploaded to the server rather than just displaying a local ...

htmlajaximagebackgroundupload

Are there alternative methods to improve the responsiveness of a column layout?

Check out this codesandbox I created to display my current status. When you change the column-count to three, a significant amount of information becomes hidden because it doesn't scroll. I've attempted using grid and flexbox layouts, but everyt ...

cssreactjsstyled-components

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

Utilizing a pure DIV table with the display: table, table-row, table-cell format for styling, I have managed to make the entire table scroll except for the header row. However, I am in search of methods that can prevent the header row (1st row) from scroll ...

htmlcss

Attempting to construct a webpage with the ability to create visual content

I've been struggling to kick off this project because I'm uncertain about what exactly I should be looking into. I would really appreciate any guidance on where or how to start. The concept is to enable users to upload an image of a postcard, in ...

javascriptphphtmlimage-processingweb-applications

Tips for displaying three divs in one row and three divs in another row

I'm aiming for a design with 3 divs in one row and another 3 in the next, like this But what I currently have is different. Can someone assist me in achieving the desired layout? MY HTML : <div class="category-food"> < ...

cssangulartypescript

H3 Tag Embraced by a Repetitive Image

As I'm developing a website, I've encountered an interesting challenge... I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate... Essentially, it&apo ...

htmlcss

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

htmlcssxhtml