Bootstrap and my CSS clashed

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">
        <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
        <div id="specificdays" class="dropdown-content">
            <a href="#">World Environment Day</a>
            <a href="#">World Ocean Day</a>
            <a href="#">World Clean Up Day</a>
            <a href="#">World Day to combat Desertification and Drought </a>
        </div>
     </li>
      <li class="dropdown">
        <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
        <div class="dropdown-content">
            <a href="#">Reward System</a>
            <a href="#">Comic Strips &amp; Posters</a>
            <a href="#">Make A Pledge</a>
            <a href="#">Why a Greenboy</a>
            <a href="#">Donate to a cause</a>
        </div>
      </li>
      <li><a id="maintopic" href="#about">ABOUT</a></li>
      <li id="logo"><a href="#home"><img src="eugene.png" class="logo"></a></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;
}

change the navbar class in HTML and CSS files. Make them unique then it will not clash simple as that — Jayant Singh
– Jayant Singh, Commented Jul 30, 2018 at 5:38
Your class names are the problem.Be more specific when you are naming a class. — Ramesh
– Ramesh, Commented Jul 30, 2018 at 6:12
@JayantSingh , i did exactly as that but that didnt work out well. Although some features were only working. — Great Guy Gary
– Great Guy Gary, Commented Jul 30, 2018 at 6:43
Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Jul 30, 2018 at 18:00

Jayant Singh · Accepted Answer · 2018-07-30 05:52:08Z

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">
    <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
    <div id="specificdays" class="your-theme-dropdown-content">
        <a href="#">World Environment Day</a>
        <a href="#">World Ocean Day</a>
        <a href="#">World Clean Up Day</a>
        <a href="#">World Day to combat Desertification and Drought </a>
    </div>
 </li>
  <li class="your-theme-dropdown">
    <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
    <div class="your-theme-dropdown-content">
        <a href="#">Reward System</a>
        <a href="#">Comic Strips &amp; Posters</a>
        <a href="#">Make A Pledge</a>
        <a href="#">Why a Greenboy</a>
        <a href="#">Donate to a cause</a>
    </div>
  </li>
  <li><a id="maintopic" href="#about">ABOUT</a></li>
  <li id="logo"><a href="#home"><img src="eugene.png" class="your-theme-logo"></a></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;
}

Thanks for the help bro. But when i put the bootstrap link - <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> . It does not function normally, like the text decoration of the <li> . @Jayant Singh

Safwan Shaikh · Accepted Answer · 2018-07-30 06:18:56Z

0

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

answered Jul 30, 2018 at 6:18

Safwan Shaikh

5462 silver badges9 bronze badges

Comments

RRRGGG · Accepted Answer · 2018-07-30 06:37:19Z

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">
        <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
        <div id="specificdays" class="dropdown-content">
            <a href="#">World Environment Day</a>
            <a href="#">World Ocean Day</a>
            <a href="#">World Clean Up Day</a>
            <a href="#">World Day to combat Desertification and Drought </a>
        </div>
     </li>
      <li class="dropdown">
        <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
        <div class="dropdown-content">
            <a href="#">Reward System</a>
            <a href="#">Comic Strips &amp; Posters</a>
            <a href="#">Make A Pledge</a>
            <a href="#">Why a Greenboy</a>
            <a href="#">Donate to a cause</a>
        </div>
      </li>
      <li><a id="maintopic" href="#about">ABOUT</a></li>
      <li id="logo"><a href="#home"><img src="eugene.png" class="logo"></a></li>
    </ul>
</nav>

I'm sorry bro , but this didn't help. You should try run the codes haha
somehow my snippet is not working but solution is right that only just you have to add class nearby navbar and just target all the css with your class and navbarclass

Collectives™ on Stack Overflow

Bootstrap and my CSS clashed

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related