The styling of Bootstrap collided with my CSS

While working on my web development project, I encountered an issue with the navigation bar. My friend was responsible for creating the nav bar, but when I integrated his code into my website, it clashed with Bootstrap and caused display errors. I tried various solutions like rearranging the link references after Bootstrap, but none of them worked.

I suspect that the clash occurred due to conflicting classes in the CSS and HTML codes. Here are the snippets of CSS and HTML:


            <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: 0;
                padding: 0;
            }
            #mainpage{
                width: 100%;
                height: 650px;
            }
            /* Rest of the CSS code goes here */
htmlcsstwitter-bootstrap

Answer №1

Redefine your class name to something unique that is not already used in Bootstrap. You can incorporate your website's name or any distinctive identifier into the class name.

<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>

Update these classes in your CSS file as well:

*{
    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

Consider renaming your custom classes to avoid conflicts with existing classes, such as the .navbar class which is already defined in Bootstrap's css file.

Answer №3

If you're looking to incorporate some CSS from Bootstrap alongside your custom styles, simply create a new class near the navbar class and use it to target all navbar elements with the desired styling.

*{
    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>

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

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

My current listing contains various files and folders: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon ...

javascripthtmljquery

In React, the entire component refreshes every time the modal is opened

<ThemeProvider theme={theme}> <GlobalStyle /> {componentName !== 'questionaire' && componentName !== 'activityResult' && <CardWrapper />} <ErrorModal ...

javascripthtmlreactjs

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

htmlcsstwitter-bootstrapbootstrap-4

Layering an object on top of a clone using CSS

I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...

jqueryhtmlcss

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you. Below is the code snippet: fun ...

javascripthtmljquerycsstr

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

htmlcss

Stop manipulating links with jquery mobile to maintain original behavior

I have a situation where I am listing WordPress posts, and when I click on a title, jQuery is loading the single post page for me via ajax. However, I don't want this behavior - I just want the link to act normally. I have tried using the following co ...

jqueryhtmlcsswordpressjquery-mobile

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

javascripthtmlcsssiblings

Looking for a simple method to display a popover using conditional if/else statements?

On my website, I am utilizing JavaScript to determine the user's Facebook status. This includes checking if the user is already logged in and has allowed our app, if they are logged in but haven't authorized our application, or if they are not lo ...

javascripthtmlfacebookpopup

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

htmlcssbootstrap-5

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

htmlcssasp.net-mvcbootstrap-4

Which file type is universally compatible with the majority of web browsers?

After adding an mp3 audio file to my website, I noticed that it may not be supported by some browsers or Operating Systems due to its format. What is the most widely supported audio format by browsers so I can convert my audio to that? ...

html

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with c ...

cssangularangular-material

Separate the divs in a template into individual templates, or alternatively, utilize ng-if to display different divs within a single template

As a newcomer to AngularJS, I am seeking advice on the most efficient way to code for the given scenario: Scenario: I have a single HTML template containing multiple divs, and I need to display only one div at a time based on specific conditions. Two app ...

javascripthtmlcssangularjs

How to enable multiple selections in a Bootstrap 5 form-select, but restrict users to selecting only one

I am looking to create a modal with a list of options where only one option can be selectable. The default form-select is a dropdown menu that requires an unnecessary click, which I want to avoid. I would like all options to be displayed without the need f ...

htmldrop-down-menubootstrap-5

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Ensure that pressing the ENTER key on a form will only activate a specific submit button, even when there are multiple buttons present

I have a form containing two submit buttons - name="submit_button" and name="search_me_logo". Depending on which button is pressed, the form should perform different actions when it reaches the action location. Currently, when the enter key is pressed, th ...

javascriptphphtmlforms

Retrieve the XPath for the elements that combine to create a specific string within an HTML document

Issue: Searching for the xpath of node(s) that contribute to a text string in an HTML document. Using Python language (lxml to parse the document) To demonstrate, let's examine the following document: <HTML> <HEAD> <TITLE>samp ...

pythonhtmlregexxmlxpath