CODEWITHSUNDEEP
htmlcssbootstrap-4
Jeeva Bharathi
Jeeva Bharathi

Reputation: 99

My Nav bar items get highlighted with blue and underlined when I use bootstrap. Why?

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IBAE-Information Library</title>
        <link rel="stylesheet" href="/Users/jeevabharathi/Desktop/Project.css">
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    </head>
    <body>
        <nav>
            <h1 style="font-family:Helvetica;">
                <ul class="cf">
                    <li><a href="#">Menu 1</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Menu 2</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                        <li><font size="+4", color="white">TITLE</font> <br></li>
                    <li><a href="#">Menu 3</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 4</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                </ul>
            </h1>
        </nav>

        <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    </body>>

</html>

This is my html code. Bootstrap and bootstrapcdn resulted in that highlighted blue and underlined text. Both latest. I am trying to use fade in effect and smooth scrolling effect in the project. Using Bootstrap seemed easier in theory, so I opted for it for my project. How do I avoid that highlighting from happening?

Edit: Here's CSS

    nav{
    text-decoration: none;
}
nav h1 
    {
        margin:-10px;   
        background-color: rgb(0, 0, 0);
        border: 25px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;

    }
nav ul 
{
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li 
{
    float: left;
    margin: 0;
    padding: 0; 
    position: relative;
    min-width: 20%;
}
nav a 
{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav .dropdown:after 
{
    content: '';
}
nav .dropdown:hover:after
{
    content:''
}
nav li:hover a 
{
    background: rgb(0, 0, 0);
}
nav li ul 
{
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
nav li ul li 
{
    float: none;
    width: 100%;
}
nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

/* Clearfix */

.cf:after, .cf:before 
{
    content:"";
    display:table;
}
.cf:after 
{
    clear:both;
}
.cf 
{
    zoom:1;
}​

Upvotes: 1

Views: 3274

Answers (2)

Aljosha Novakovic
Aljosha Novakovic

Reputation: 350

The blue and the underline are just defaults for a link. If I just throw in the following code:

<a href='www.google.com'>Google</a>

It is going to be underlined and blue.

So it's not the bootstrap that is giving you that. In fact, your first problem is that you are not even importing the bootstrap css. Put this in your right before you import your own custom css:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

Upvotes: 0

Jos van Weesel
Jos van Weesel

Reputation: 2188

Because Bootstrap has its own styles included in their CSS file.

You can get rid of this by changing the styles in your own CSS, and if necessary, by adding !important to your CSS declarations.

Add this to your nav a to overwrite Bootstrap's text-decoration:

nav a {
  text-decoration: none !important;
}

And add this to your nav li:hover a to change the color back to white:

nav li:hover a {
  color: white;
}

Here's a JSFiddle demo with the changes I made above.

Upvotes: 2

Related Questions