How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar:

.navbar {
  overflow: hidden;
  !important;
  background-color: #333;
  !important;
}
...

The problem persists even after trying to rename the navbar classes in both HTML and CSS files. Is there a way to resolve this issue without compromising on the design of the navbar?

htmlcssbootstrap-4thymeleafnavbar

Answer №1

It's crucial to place the !important declaration on the same line.

However, a better approach would be to utilize a standardized Bootstrap navbar and customize it to suit your preferences.

Another factor to consider is the order of your stylesheets - ensure that your header.css is placed after the bootstrap css in order to avoid using !important.

<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
<link rel="stylesheet" th:href="@{/style/header.css}">


.navbar {
  overflow: hidden !important;
  background-color: #333 !important;
}

.navbar a {
  float: left !important;
  font-size: 16px !important;
  color: white !important;
  text-align: center !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
}

.dropdown {
  float: left !important;
  overflow: hidden !important;
}

.logout {
  float: right !important;
  horiz-align: right !important;
}

.dropdown .dropbtn {
  font-size: 16px !important;
  border: none !important;
  outline: none !important;
  color: white !important;
  padding: 14px 16px !important;
  background-color: inherit !important;
  font-family: inherit !important;
  margin: 0 !important;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red !important;
}

.dropdown-content {
  display: none !important;
  position: absolute !important;
  background-color: #f9f9f9 !important;
  min-width: 160px !important;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2) !important;
  z-index: 1 !important;
}

.dropdown-content a {
  float: none !important;
  color: black !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  display: block !important;
  text-align: left !important;
}

.dropdown-content a:hover {
  background-color: #ddd !important;
}

.dropdown:hover .dropdown-content {
  display: block !important;
}
<div th:fragment="header">
  <div class="navbar">
    <div class="logout">
      <a th:href="@{/logout}">Logout</a>
    </div>

    <div class="dropdown">
      <button class="dropbtn">Hackathon
                <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a th:href="@{/administrator/search/hackathons}">Search</a>
        <a th:href="@{/administrator/create/hackathon}">Add</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn">Judge
                <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a th:href="@{/administrator/search/judges}">Search</a>
        <a th:href="@{/administrator/create/judge}">Add</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn">Mentor
                <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a th:href="@{/administrator/search/mentors}">Search</a>
        <a th:href="@{/administrator/create/mentor}">Add</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn">Team
                <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a th:href="@{/administrator/search/teams}">Search</a>
        <a th:href="@{/administrator/create/team}">Add</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn">Member
                <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a th:href="@{/administrator/search/members}">Search</a>
      </div>
    </div>
  </div>
</div>

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

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

javascriptjqueryhtml

Angular provides the capability to sort through data using various criteria

I have received an array of objects in a specific format from the server, which may contain more than 2 objects. [ {processId : 1, processName : "process1", country : "germany", companyCode:"IB" , companyHiringType:"FRE", masterClauses:[ {cl ...

javascripthtmlarraysangulartypescript

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

javajqueryhtmldrop-down-menujquery-selectbox

Stop the Form from Submitting When Errors are Present

In the midst of explaining my issue, I must first share details about a form I'm developing. It's a Registration form where upon submission by clicking Submit, users won't immediately reach a Successfully Registered page. Instead, they' ...

javascriptphpjqueryhtmlforms

What steps can I take to ensure that this code is validated prior to proceeding to the subsequent page?

I am experiencing an issue with this HTML fieldset form code. When I click the submit button, it redirects to the next page. However, if I remove "next" from the button class, the form validates but does not proceed to the next page. Can you please help me ...

jqueryhtml

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

csshtmlcenter

Using Bootstrap 3 to implement various grid systems within a single website

For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/cu ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to showcase my background image using html and css?

I've come across a similar topic addressing my problem, but I am still unable to resolve it. I am attempting to add a background image to my portfolio, but for some reason, it is not working. Can anyone offer any suggestions or ideas? Here is the cod ...

htmlcssbackground-image

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

cssmaterial-uicreate-react-app

Altering the submit button's value following the submission of a form

My goal is to create a form with a submit button that, when clicked, will insert the value of the button into a database and change the text on the button to inserted. If the insertion violates any constraints, then the text on the button should be changed ...

phphtmlajax

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

javascriptjqueryhtmljsonajax

The getText method in Selenium seems to be malfunctioning as it is unable to retrieve any text content from

Struggling to capture the text of WebElement using two different methods, but both are returning blank strings. // Method 1 d.findElement(By.id("deliveryDate")).getTex(); // Method 2 WebElement deliveryDate = d.findElement(By.id("deliveryDate")); Sys ...

htmlselenium

Footer refuses to stay anchored at the bottom of the page

I'm struggling to keep my footer at the bottom of all pages on my blog. I am facing two main issues. If I use position:absolute, the footer ends up in the middle of the main blog page. Alternatively, when I don't use it, the footer sticks to the ...

htmlcssblogstumblr

The cache feature seems to be malfunctioning, resulting in images having to be reloaded every time

I am working on a simple webpage at . The issue I'm encountering seems to be specific to Google Chrome - every time I reload the page, the images are reloaded as if there is no cache. I noticed that when checking the example on stackoverflow.com, the ...

phphtmlgoogle-chromebrowser-cache

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

cssvue.jsamazon-s3gitlab-ci

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Despite scouring numerous StackOverflow questions, I haven't been able to find a solution that fits my specific issue. It seems like there might be a CSS attribute preventing the div from centering properly. Could utilizing flexbox help resolve this? ...

cssreactjsflexboxnext.js

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

I've been working on a template that includes a blog.html file featuring various layouts: full-width layout 2 column layout 3 column layout 4 column layout I've customized the blog.html so that when specific classes are added to the body tag, ...

jqueryhtml

Prevent one individual cell in a table from dictating the overall table width

A B A B A X A B In a contained block with a fixed width of 400px, there is a table. When the browser width drops below 421px, the width of the containing block changes to 95%. The cells labeled "A" and "B" contain simple text. There is one cel ...

css

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

javascriptjqueryhtmlangularjsevents