Link color need to be same

i made the following with bootstrap but unable to guess why it chosen primary color. all need to in white. give your recommendations.

<nav class="navbar navbar-expand-lg"> <!--navbar-light bg-light">-->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>

                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Service</a>
                    <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
                      <a class="dropdown-item" href="#">Dance</a>
                      <a class="dropdown-item" href="#">Instruments</a>
                      <a class="dropdown-item" href="#">Vocal</a>
                      <a class="dropdown-item" href="#">Corporate</a>
                      <a class="dropdown-item" href="#">Photography</a>
                      <a class="dropdown-item" href="#">Personality</a>
                      <a class="dropdown-item" href="#">Grooming</a>
          <!--  <a class="navbar-brand" href="#">Navbar</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>
            <li class="nav-item">
                <a class="nav-link" href="#">Clients</a>
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                <li class="nav-item">
                  <a class="nav-link" href="#">Event</a>
                <li class="nav-item">
                  <a class="nav-link" href="#">Gallery</a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>


@import url('|Raleway');
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: 'Raleway', sans-serif;
    width: 100%;
    height: 100%;
     max-width: 1000px;
   color: white;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 80px;
    margin: auto;

    background-size: 100% 100%;

What does your browser tell you when you inspect the element?

You don’t seem to have styled any of the links white?

The default in bootstrap is blue which is what you get.

You need to change them if you want something lse.


.navbar li:hover, .navbar > a {
.nav-link {
.nav-link:hover {

However you are better off not using the bootstrap class names but give the parent a new class name of your own and use that to modify rules.

Also your global reset is a bad move as bootstrap will have a reset built in and you * {} rule could interfere with inheritance and the default themes etc.

Also don’t style elements globally (e.g. li:hover) but instead use a class name to do it otherwise you change every instance of the list throughout a site and it may be used in multiple places and in different situations.

Welcome to the forums, ak0787777.

Some general information for new members.

If you have not done so already, please read our posting guidelines.

Specifically, please note that we request a “working page” that demonstrates the issue so we can see the same thing on our computer that you see on yours. A “working page” begins with a <!doctype ...>. It continues with the <head> section which addresses any essential resources that your page needs and may include any on-page CSS between <style> tags. Next will come the <body> portion of the page in which the HTML that demonstrates the issue will reside. Just before the </body> close body portion of the page we normally expect to find JS or links to external JS routines that would not have been appropriate to include in the <head> of the page. Finally, the page should end with the </html> close HTML tag. The code should be validated before posting. Neatly formatting the code (eg: Tidy) is a plus for everyone.

Example “working page”:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src=""></script> <!-- IF jQuery is used -->
    <link rel="stylesheet" href=""> <!-- IF Bootstrap is used, call correct version -->
    <link rel="stylesheet" href="css/stylesheet.css"> <!-- local stylesheet, can override preceeding stylesheets-->
on-page css here, if any, can override preceeding stylesheets
HTML here
on-page JS here, if any

Most of the code that we post in the HTML/CSS forum will be in the form of a “working page” so there are plenty of examples for you to see.

Be sure that the URLs that call resources are full URLs or that the resources, such as scripts or images, are attached to your post.

You can create a CodePen or JSFiddle that demonstrates the issue and includes surroundind (framing) page code so we can understand how and where the troublesome code exists on the page.

Finally, you could choose to post a link to your test site where we can see your code in action.

You can add screen shots that help demonstrate the issue. They do not substitute for code, though. Don’t expect us to copy your code from a screenshot. :nono:

Please be sure to give us feedback about our efforts. We want to know if our efforts are helpful or not.

Thank you for reading and we hope you enjoy your visits here. :slight_smile:

yeah it worked . Thanks so much for your kind help

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.