The navbar-brand does not seem to be updating its color properly within Bootstrap 4

Struggling to modify the color of the navbar-brand class with Bootstrap 4? Despite referencing the documentation, I've hit a roadblock in changing its appearance. By adding a new navbar-custom class to customize the navbar-band class, it should have worked according to my understanding.

This is my code:

@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  font-family: 'Roboto', sans-serif;
}
.navbar-custom {
  background-color: #ff5a5f;
}
/* changing brand and text color */
.navbar-custom .navbar-brand {
  color: white;
  font-size: 25px;
}
/* modifying link color */
.navbar-custom .navbar-nav .nav-link {
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>iGloo</title>
  <script src="https://use.fontawesome.com/bf64aa8e30.js"></script>
</head>


<body>

  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom">
      <a class="navbar-brand" href="#">iGloo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

  </header>

  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="https://cdn.homedit.com/wp-content/uploads/2011/10/room-for-teens-girl-orange-picture.jpg" , class="img-fluid" alt="Room Image"></img>
      </div>
    </div><br>

    <div class="row">
      <div class="col-md-6 title">
        <h2>A House in the Middle of South Avenues.</h2>
      </div>

      <div class="col-md-6">
        <h5>Ahmed Fahad</h5>
      </div>
    </div><br>

    <hr>

    <div class="row">
      <div class="row">
        <div class="col-md-3">

          <i class="fa fa-bed fa-2x" aria-hidden="true"><p>Bedrooms 3 </p></i>

        </div>

        <div class="col-md-3">
          <i class="fa fa-bath fa-2x" aria-hidden="true"><p> Bathrooms 3 </p></i>
        </div>

        <div class="col-md-3">
          <i class="fa fa-user-circle-o fa-2x" aria-hidden="true"><p>People 6</p></i>
        </div>

        <div class="col-md-3">
          <i class="fa fa-home fa-2x" aria-hidden="true"><p>Entire House</p></i>
        </div>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-md-9">
        <h3>About this House</h3>
        <p>A wonderful house in the middle of South Avenues. It's good for a fmaily who are looking for a holiday in South Avenues. It has alot of windows and the sun light is perfect in the house.</p>
      </div>
    </div><br>
    <hr>

    <div class="row">
      <h3>Amenities</h3>
    </div>

    <div class="row">

      <div class="row">
        <div class="col-md-3">

          <i class="fa fa-wifi fa-2x" aria-hidden="true"><p>Wifi</p></i>

        </div>

        <div class="col-md-3">
          <i class="fa fa-television fa-2x" aria-hidden="true"><p>TV</p></i>
        </div>

        <div class="col-md-3">
          <i class="fa fa-bed fa-2x" aria-hidden="true"><p>6 Beds</p></i>
        </div>

      </div>
    </div>

    <hr>



</body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


</html>

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

.navbar-brand{
    color:blue !important;
  }

Give this a shot.

Answer №2

Transitioning from Bootstrap 3.3.7 to 4.3.1 in my asp.net core 2.2 project has presented challenges in getting my layout to function properly once again. Among the issues faced, one stood out - the navbar-brand which should be grey by default and turn white upon hovering. However, post-update, it consistently remained white without responding to hover actions. Despite attempts to explicitly set colors in the bootstrap.css file proving futile, I resorted to a clunky workaround of using !important prior to navbar creation (specifically in _Layout.cshtml for asp.net core 2.2).

 <style type="text/css">
.navbar-brand {
  color: #9d9d9d !important; 
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fff  !important;
}

Thankfully, this approach seems to have resolved the issue for me.
A significant observation worth noting is that placing the style declaration after navbar creation inadvertently results in the text turning white (and back to gray) upon selecting another menu item.

Answer №3

If the issue persists, I recommend ensuring that your custom CSS is called after the bootstrap.min.css file.

Answer №4

give this a shot 

.header-nav .logo{
    insert your code snippet
  }

Answer №5

Include a new class name "brand" to the existing element:

    <a class="navbar-brand brand" href="#">TechZone</a>

The styling in CSS should appear as follows:

    .navbar-brand.brand {
       text-decoration: none;
       font-weight: bold;
    }

Answer №6

It seems like there was a slight oversight in closing the CSS for *. This small mistake is preventing the CSS below it from being applied properly. Once this error is corrected, your color changes should display as intended.

Answer №7

If you're feeling adventurous, experiment with creating your own style for the navbar-brand element

Here's a simple example to get you started:

<a class="navbar-brand custom-style" href="#">MySite</a>

.navbar-brand.custom-style{
  font-weight:bold;
  color:purple;
}

Answer №8

It seems like you may have already found the solution since this question was asked quite a while ago. I recently encountered this issue myself and none of the suggested solutions worked for me either. It turns out the problem lies with the specific theme we are using. In the previous question, the .navbar-light theme was mentioned. You cannot directly access it with a custom class, so you need to access it through the theme class.

.<your theme class> .navbar-brand{

}

Therefore, your CSS should look something like this:

.navbar-light .navbar-brand{
color:#fff;
}

Answer №9

Dealing with a similar problem, I found success by assigning it an ID instead. Since IDs take precedence over classes in specificity, this approach proved effective. Give it a try and see for yourself.

To start, establish a personalized CSS file (linking it to your HTML). Within that stylesheet, define the ID and ensure that within the 'a' tag, the ID precedes the class.

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

My array magically transforms into an object once it reaches 22 elements, why is that happening? (node)

While working on a form with multiple checkboxes that have the same name and submitting it through a node/express post route, I encountered an issue. Here is the corresponding HTML code: https://pastebin.com/xeQae6GA The problem arises when trying to ret ...

htmlarraysnode.jsformsexpress

unable to display options in my select element | Angular and Ionic

I need help displaying my category options: <div class="row" style="margin-bottom:15px;padding:0;padding-top:0px;padding-bottom:0px;"> <div class="col col-white" style="height:45px;background-color:#EDEEF1;padding-top:6px"> <div class=" ...

javascriptjqueryhtmlcssangularjs

Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve ...

htmlcssresponsive-design

Enhance the HTML5 Canvas arc by redrawing it upon hover

I have a challenge with my arcs: the first one loads on page-load, the second one loads on mouse-over, and the third one loads on mouse-out. However, I want the mouse-over-out effect to happen repeatedly rather than just once as it currently does. For ref ...

javascripthtmlcsshtml5-canvas

Flexbox: Arrange header and footer in a sidebar layout using flexbox styling

In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop. I have already implemented this using floats ...

htmlcssflexbox

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

I've managed to create a cool effect with a div of an airplane inside a parent div that has 'overflow: hidden' applied. This setup gives the illusion that the airplane div is flying from under an element on the page and carrying a banner alo ...

css

How to incorporate diagonal lines in CSS within its parent container?

Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; ...

htmlcsscss-transformsdiagonal

What is the best way to ensure that the scroll position on each page in shinydashboard remains unaffected by changes in the scroll position on other pages?

When navigating between pages A and B in my shinydashboard app, I noticed that the scroll position of one page affects the scroll position of the other. How do I make the scrolls independent? To illustrate my issue, I've included a stable shinydashbo ...

javascriptcssrshinyshinydashboard

Why is the image popup feature not functioning properly? What could be causing the issue?

I'm experiencing issues with the functionality of my HTML file and image popup. I've attempted to troubleshoot it multiple times without success. Here is a code snippet for reference: You can view and run the code on CodePen: Open <html> ...

javascriptphphtmlcss

Is Chrome prone to memory leaks when utilizing a Shared Worker?

I have encountered an issue with my web page that triggers a HTML5 SharedWorker script. Interestingly, each time I refresh the page (using F5), the memory usage in Chrome increases. The worker script is quite basic. It simply sends a message to the connec ...

htmlgoogle-chromememory-leaksweb-worker

Enhancing Responsive Tables with Vertical Alignment in Bootstrap 4

When utilizing Bootstrap 4 and adding table-responsive to a table, the text may no longer be centered vertically. Is this a bug? If not, is there an easy solution available to center the text in the middle? A pure Bootstrap solution would be greatly apprec ...

htmlcssbootstrap-4

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated.https://i.sstatic.net/daavn.pn ...

javascriptpythonhtmlcssdjango

Choose only the options that are present in both arrays

I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...

javascripthtmlangulartypescript

When using JavaScript's Date() function, it may sometimes return an

I am currently developing a website that calculates the time elapsed since a specific date. However, when I input the parameters provided by the user and call new Date(), it displays "Invalid Date". This is the code snippet I have been using: http://jsfid ...

javascriptjqueryhtmlcssdate

A guide on linking to different sections on your webpage with Framework7

Exploring the traditional method of linking to specific sections on a webpage, where the anchor tag points to an element's ID within the page. Here is an example: <div class="main" id="section1"> <h2>Section 1</h2& ...

htmlscrollhyperlinkhtml-framework-7

What's the best way to showcase certain data from a JSON object in a structured table format?

{"symbol":"DRREDDY","series":"EQ","openPrice":"3,132.00","highPrice":"3,229.90","lowPrice":"3,132.00","ltp":"3,206.35","previousPrice":"3,153.25","netPrice":"1.68","tradedQuantity":"74,165","turnoverInLakhs":"2,379.33","lastCorpAnnouncementDate":"18-Jul-20 ...

javascriptjqueryhtmljson

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: https://i.sstatic.net/7CuuX.png My version currently looks li ...

htmlcss

Restore original scale ratio to 1:1 following zoom

I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...

javascripthtmljqueryzoomingpan

Incorrect rendering of apostrophes detected

I am currently working on a basic blog using PHP, MYSQL, and HTML. I encountered an issue with displaying apostrophes and quotes on the webpage. Instead of showing "example," it displays \"example\" even though I have used escape strings. Here is ...

phphtmlmysql

Is there a way to format an entire column in bold?

I have a large HTML table that I need to format so that the 16th column stands out by being bold. However, using <colgroup> and <col> doesn't seem to work as intended: <HTML> <BODY> <TABLE BORDER='1'> <colgr ...

htmlcsshtml-table