Styling the <nav> element with CSS

Why is the CSS property not applying to the <nav> element? Are we unable to style these specific Bootstrap tags on our own? If it is possible, how can we achieve this?

nav{
  display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1L" crossorigin="anonymous">
          
<nav class="navbar bg-dark nav-light shadow">
  <h1 style="color:white">hello</h1>
</nav>
htmlcssbootstrap-4

Answer №1

It has been mentioned by @kukkuz that CSS relies on specificity for styling application. Therefore, modifying the selector is all it takes to make the desired changes.

nav.navbar {
  display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          
<nav class="navbar bg-dark nav-light shadow">
  <h1 style="color:white">hello</h1>
</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

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...

jquerycsstwitter-bootstrap-3bootstrap-modal

retrieve the Jquery progress bar's current value

Having trouble determining the value of the progress bar in order to increase it by a percentage with each step. No matter what I attempt, I keep getting errors such as 'undefined' or 'method cannot be called before object instantiation.&apo ...

jqueryhtml

Fraudulent emails targeting my posted ads - beware!

Operating a classifieds website where anyone can view and contact posters without needing to be a member poses certain challenges. One of the main issues I face is the abundance of scam emails being sent to users, attempting to deceive them and steal their ...

phpmysqlhtmlsecurityemail

Automatically collapse the Bootstrap4 Dropdown Menu upon clicking the select element

After tackling my previous issue on Stack Overflow, I stumbled upon a new question that has been bothering me. The problem arises when users click on the arrow to reveal advanced search options, as the form drops down as expected. However, when a user cli ...

javascriptdrop-down-menubootstrap-4dropdownpopper.js

Struggling with implementing the group by feature in AngularJS?

Currently, I am trying to group a select-window by 2 different object arrays - subcategories and rootcategories. Each subcategory has a relation id that links to the rootcategory's id. My goal is to have the dropdown window group the subcategories bas ...

javascripthtmlangularjs

Different ways to modify the CSS file of the bx-slider plugin for multiple sliders within a single webpage

Currently in the process of building a website using bx slider. I am looking to incorporate three sliders onto a single page for sliding HTML content. Initially, I added a bx slider to the page and customized it using CSS. I made modifications within jqu ...

javascriptjqueryhtmlcssbxslider

Aligning a tri-column design

I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered ...

htmlcsspaddingcenteringmargins

How is the console displaying JavaScript code when I haven't stored it in a separate file?

When trying to trigger a jquery action on an element, an error occurred. Upon checking the console, it displayed an error message: https://i.sstatic.net/5DZSJ.png Interestingly, the code causing the error is not present in my js file at all. Here is a s ...

javascripthtmljquery

Unusual arrangement of images (HTML, CSS, Bootstrap)

I recently started my journey with freecodecamp a few days ago. I encountered my first project which required me to create a tribute page for anyone in the world. The page needed to include a picture, some text, and a link to an external site. However, I& ...

htmlcssbootstrap-4

What is the best way to create multiple PDF pages using mpdf1?

Currently using mpdf1 and looking to generate a PDF with a table of 4000 rows. Any suggestions on how to achieve this using mpdf1? Is there a method to speed up the process and avoid waiting for several minutes? ...

phphtmlpdf

Creating a dynamic sidebar navigation that adapts seamlessly across all devices, including desktop and mobile platforms

I am currently using Bootstrap 5 to design a resume webpage. While I have achieved the desired look, I am facing an issue with making the sidebar fixed without overlapping other content when the page is resized to be smaller. Initially, I attempted to use ...

htmlflexboxbootstrap-5sidebarfluid-layout

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Generate a single-page PDF document mirroring the content of a website

I'm facing a dilemma. I need to generate a one-page PDF file without any gaps between the pages. Despite trying numerous plugins, add-ons, scripts, and software, all of them produce multiple pages. What I really require is to have all the pages in a s ...

phphtmlweb-services

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

cssangular

Issues arising from the interaction of one DIV with another DIV

I'm having trouble positioning a menu (height = 100%) next to the logo. Essentially, when the image controls the height of the DIV (container), it seems logical that adding another DIV (menu) with height: 100% inside that DIV (container) should resul ...

htmlcss

When converting Html to Pdf, the styling on the top of the body is experiencing additional padding and margin

When converting, I noticed that there is extra top space appearing on the left and top when converting to a PDF file. Can you help me understand why this is happening? ...

htmlcss

What is the best way to choose two <li> elements with multiple classes in my WordPress navigation menu?

I am looking for a JavaScript function that will add the class "current_highlight" when an element with the class "activo2" also has the class "active". Here is my HTML code: <div class="navbar-header"> <button type="button " class="navbar-to ...

javascriptjqueryhtmlcsswordpress

In Outlook, images are always shown in their true dimensions

While everything is working perfectly fine in Gmail, Yahoo, and Hotmail, there seems to be an issue with the display of the logo image on Outlook. The custom width and height settings are not being applied properly, resulting in the logo being displayed ...

asp.nethtmlcssemailoutlook

How should Bootstrap containers, rows, and columns be properly configured?

As a beginner in Bootstrap, I am still trying to grasp the concepts. Understanding how rows, columns, and containers work is clear to me so far. However, I am struggling with the syntax for setting up the div elements. Should my code look something like t ...

htmlcsstwitter-bootstrap-3

The Divs pile one on top of the other

I am trying to position the second div below the first div instead of stacking on top of it and making the first div invisible. How can I achieve this? .shop { width: 100%; height: 1000px; background-color: #ffffff; position: relative; ...

htmlcss