Discrepancy in Bootstrap Navbar Brand and Links color appearance when attempting to change font and color across entire navbar

As a newcomer to CSS, I am facing an issue with my navbar. I want both the navbar brand and navbar links to be the same size and color. However, when I try to change the font and color of the entire navbar, only the font changes and the color remains inconsistent. The branding also remains unaffected. I need help figuring out what changes I can make to achieve a consistent look for both the brand and links. Below is the navbar code as well as the CSS I am using to style it, along with the current result.

#mainNavbar {
  font-size: 2em;
  color: #e84545;
  font-weight: 200;
}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-dark navbar-dark navbar-expand-md" id="mainNavbar">
  <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="nav-links">
    <ul class="navbar-nav">
      <li class="navbar-item">
        <a href="#home" class="nav-link">HOME</a>
      </li>
      <li class="navbar-item">
        <a href="#about" class="nav-link">ABOUT</a>
      </li>
      <li class="navbar-item">
        <a href="#tickets" class="nav-link">TICKETS</a>
      </li>

    </ul>
  </div>
</nav>

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

htmlcssbootstrap-4

Answer №1

To modify the specific text within the <a> tags, remember to target that tag using CSS styling.

#mainNavbar a {
  font-size: 1.5em;
  color: #3a8bc8;
  font-weight: 400;
}

Answer №2

For customizing the colors and font settings of the links in your navbar, @Douglas’ solution is perfect. However, if you want to maintain the standard navbar behavior (active class and hover effects), you will have to override Bootstraps’ styles. This involves examining each item with font color and size through your browser’s Developer Tools, identifying where the font settings are sourced from, and then overriding those settings in your CSS styles on your webpage.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3c3d2e3f0f7b6179617f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e252d2d2e232114507a727a64">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<style>
    /*#mainNavbar {
        font-size: 2em;
        color: #e84545;
        font-weight: 200;
    }*/

    .navbar-dark .navbar-brand {
        font-size: 2rem;
        font-weight: 200;
        color: #e84545;
    }

    .navbar-dark .navbar-brand:hover {
        color: rgba(232, 69, 69, 0.9);
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(232, 69, 69, 0.6);
        font-size: 2em;
        font-weight: 200;
    }

    .navbar-dark .navbar-nav .nav-link.active {
        color: #e84545;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(232, 69, 69, 0.9);
    }
</style>

<nav class="navbar navbar-expand-dark navbar-dark bg-dark navbar-expand-md" id="mainNavbar">
    <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-links">
        <ul class="navbar-nav">
            <li class="navbar-item">
                <a href="#home" class="nav-link active">HOME</a>
            </li>
            <li class="navbar-item">
                <a href="#about" class="nav-link">ABOUT</a>
            </li>
            <li class="navbar-item">
                <a href="#tickets" class="nav-link">TICKETS</a>
            </li>
        </ul>
    </div>
</nav>

To create a distinction between menu items, you can adjust the transparency of the colors as per your requirements to indicate a difference to the user.

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

Unique hover effects for tab navigation

I have designed my website with 4 tabs on the homepage: holidays, hospitality, events, and consulting. I am trying to create an effect where hovering over the tabs displays images. Here is the code I have tried: HTML: <div class="menu_links"> & ...

htmlcss

Is there a way to replicate this exact toggle selection functionality from Angular Material using just HTML and CSS?

I'm attempting to incorporate this functionality into my Angular project ( link ), but I'm facing challenges with styling it using CSS. Could this be due to limitations in overriding the default settings? I came across this helpful resource: sour ...

htmlcssangularangular-materialnssegmentedcontrol

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

htmlcssweb-applicationsuser-interfaceuser-experience

Modify CSS class if user is using Internet Explorer version 10 or above

I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...

javascriptjqueryasp.netcssinternet-explorer

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

htmlcsspseudo-elementpseudo-class

What could be causing this code to only modify one element instead of both?

One input field should be able to change two elements, however with jQuery it appears that only one element is being modified. When rearranging the order of elements in the function, such as having #inCoin first and then #receive_amount, only the #inCoin ...

jqueryhtml

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is re ...

htmlcss

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

javascriptjqueryhtmlcss

Issue with Bootstrap NavBar collapsing properly on first element

I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...

htmlcssbootstrap-4

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

My query revolves around utilizing Template (HTML) within Angular. I am looking for a way to dynamically display an array of objects without permanently converting it. The array consists of objects. kpi: { value: string; header: string; footer: string }[] ...

htmlangulartypescript

When using AJAX POST requests, HTML links may become unresponsive

Scenario: Currently, I am developing a small-scale web application. The AJAX functionality is successfully sending data to create.php which then executes the necessary MySQL query. Upon completion of the AJAX request, a success message is appended to the d ...

javascriptphpjqueryhtmlajax

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

javascripthtmlnode.jstypescriptvue.js

CSS Navigation Menu - Submenu displaying above main link

<div id="header"> <div class="cont"> <div id="banner"> <div id="nav"> <ul> <li><a href="index.htm">home</a></li> <li><a href="work.html">Works»</a> <ul> ...

htmlcss

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

javascriptcssreactjsscrollonscroll

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

javascriptjquerycss

Enhance the input by incorporating more fields without altering the existing content

Currently, I am working on creating an input form that includes multiple fields and has the capability to generate a preview of the entered content in a separate div. One key feature I would like to implement is allowing users to add additional fields as n ...

javascripthtmlformstextarea