Bootstrap and my CSS clashed - html

Question

I'm doing my project for web development and my friend was assigned to do the nav bar. But after i completed my website and pasted his nav bar codes into my codes. It clashed with my bootstrap and thus not displaying correctly. I tried searching for solutions like pasting the link ref after the bootstrap but still up to no avail.
I'll put the CSS code and HTML code here. I'm guessing the classes clashed?
<nav class="navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>
/CSS/
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
li .dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.dropdown:hover .dropdown-content {
display:block;
}
.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}

Answer 1

Just rename your class with any unique name which will not be in Bootstrap.For that you can add your website name with class or anything
<nav class="your-theme-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="your-theme-dropdown">
EVENTS
<div id="specificdays" class="your-theme-dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="your-theme-dropdown">
PROJECTS
<div class="your-theme-dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="your-theme-logo"></li>
</ul>
and change these classes in CSS also
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
li .your-theme-dropdown {
display: inline-block;
}
.your-theme-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.your-theme-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.your-theme-dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.your-theme-dropdown:hover .your-theme-dropdown-content {
display:block;
}
.your-theme-navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.your-theme-logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}

Answer 2

Change the name of your defined classes, for example .navbar class in your css file is already included in css file of bootstrap.

Answer 3

If you want use some css of bootstrap and some custom css then just write new class nearby navbar class and target all navbar css with that new class
example
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav.custom-navbar{
position:sticky;
top:0;
z-index:1;
}
.custom-navbar ul li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
.custom-navbar ul li a,.custom-navbar ul li a.dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
.custom-navbar ul li .dropdown {
display: inline-block;
}
.custom-navbar ul li .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.custom-navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.custom-navbar ul li .dropdown .dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.custom-navbar ul li .dropdown:hover .dropdown-content {
display:block;
}
.custom-navbar.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
<nav class="navbar custom-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>