Navbar background-color does not change - html

as posted on the title, I can't change the background-color of my navbar. But I'm sure that my external css is working.
HTML CODE:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}"><img src="{{logo.image.url}}" alt="no image provided" style="max-width: 10rem; max-height: 10rem;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'index' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:register' %}">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'cms' %}">Manage Web Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}" tabindex="-1">Admin Page</a>
</li>
</ul>
</div>
</div>
<ul class="sample">
<a class="nav-link" href="#" tabindex="-1">sample</a>
</ul>
</nav>
EXTERNAL CSS:
.navbar {
background-color: black;
}
.sample .nav-link {
color: red;
}
And I will include a picture of my navbar just for reference. Take note of the ul tag with sample label in it, located at the right part of the navbar. It turned out to be red. That's how I knew the external CSS is working. Any ideas why is this happening?
SOLUTION: thanks to those guys who answered in the comment section. And it seems that the problem is one of these classes navbar-light orbg-light , these are default classes from bootstrap framework. So, in order for my external css to work is I needed to put !important to override those 2 classes mentioned above:
.navbar {
background-color: black !important;
}
.sample .nav-link {
color: red;
}

Just Remove bg-light bootstrap class from nav tag and add your custom class over their your result should be like this.
<nav class="navbar navbar-expand-lg navbar-light bg-example sticky-top"></nav>
.bg-example{
background-color:orange;
}

Related

I don't know add picture to my company to the navbar - angular12

I can't add logo to the navbar on my angular website.
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" routerLink=""><img src="/src/assets/images/Nikiikejks.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" routerLink="" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Domov</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="menu" routerLinkActive="active-link">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="about" routerLinkActive="active-link">O nás</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contact" routerLinkActive="active-link">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-light .navbar-nav .nav-link
{
color: var(--secondary-color);
}
.navbar-light .navbar-nav .nav-link.active-link
{
color: #64cff7;
}
.navbar
{
background-color: #f7dfde;
box-shadow: 0px 2px 5px #777 ;
}
.navbar-brand {
width:150px;
font-size: 24px;
}
.navbar-brand img {
height: 30px;
/* put value of image height as your need */
float: left;
margin-right: 7px;
}
I tried add path image and in css add some parameters, but it doesn't works.
I don't know, if I have bad size of picture or what?
Thank you.
It is not the image quality. It has nothing to do with making it functional or not. When img is not shown you either have a wrong path (instead of /src/assets you need assets/etc) or wrong extension (your image is .png and not .jpg or the other way around)
I believe you need to leave the folder app first, and after that, go to the assets.
I don't know your folder structure, but if you currently are on app.component or in the folder app, your path should be: ../assets/images/Nikiikejks.png.

Toggle Bar responsiveness issue

I have written code using bootstrap. But my issue is in the Toggle bar , like when I shrink the size to see my Web page responsive or not then the toggle bar is not open.
It shows the three button but when i click then it is not expanding.
Please give me suggestions to get rid of this issue.
Thanks.
Html code
<section>
<div id="container1">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="scroll nav-link" href="#home" style = "color: #ffff;">HOME</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#about" style = "color: #ffff;">ABOUT</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#services"style = "color: #ffff;">SERVICES</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#contacts" style = "color: #ffff;">CONTACTS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
**Css code**
#container1{
margin-top:5rem ;
display: inline-block;
width: 100%;
}
#container1 ul li {
margin-left: 8rem;
margin-right: -5rem;
border-right: 0.0625rem solid grey;
}
#container1 ul li a:hover{
background-color: #5e9ee7;
}
I just get rid of my issue that I have arose a few hours ago. I finally got a fix of my problem. It only happens by removing "bs" which is present in between (data-bs-toggle="collapse") and in (data-bs-target="#navbarNav") in the html code.

Hamburger menu not showing up on smaller screens for bootstrap 5 navabar

'I've put in the stylesheets for both bootstrap css and js in the file. It shows up when I retain default colour options but not when I customise the colour.'
'''
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">item</a>
</li>
</div>
</div>
</nav>
'''
CSS: I've added a background colour to the body and also made the nabber the same colour. I've made the text pink and added a green hover to navbar text.#
body{
background-color: #FFE57C;
}
.navbar{
padding-left: 350px;
}
.navbar a:hover{
color: #FF7CD8;
}
.navbar a {
color: #FF7CD8;
}
.nav navbar-nav .navbar-center {
color: ##FF7CD8;
}
Try retaining that navbar-light class in inside top nav tag, or you can use navbar-dark if you want. check the documentation here for more details. this class is associated with showing hamburger icon in bootstrap 5. see the code from bootstrap.css :
navbar-light .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
but you can change the colors in navbar by adding an id for ul tag and add the properties for id in style, this way we can tweak the default properties given by the bootstrap. You might be able to achieve what you need by this code, check the code below:
html:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="nav-list">
<li class="nav-item">
<a class="nav-link active" aria-current="page"href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item</a>
</li>
</ul>
</div>
</div>
</nav>
css:
body{
background-color: #FFE57C;
}
.navbar{
padding-left: 350px;
}
#nav-list a {
color: #FF7CD8;
}
#nav-list a:hover{
color: #FF7CD8;
}
for sample i just put 2 list items in navbar.

Adding a subtitle to a Bootstrap Navbar

I have a Bootstrap 4 website with a navbar. The navbar has a brand part with an image and title text, and then there's the rest of the navbar. You can see it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/
Now, I want to add a subtitle, under the title "A Digital Onomasticon". The problem is - the substitle is long, and I want it to extend below the nav links.
I tried everything I could think of and couldn't figure out how to do that.
NOTE: the answer to this question is not sufficient, as it yields something like this: https://jsfiddle.net/zmbq/7et2uz0w/
Wrap the brand and links in a separate flexbox (d-flex) div...
<nav class="navbar navbar-light bg-light navbar-expand-sm flex-nowrap align-items-start">
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
</a>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<a class="navbar-brand" href="#">A Digital Onomasticon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarOnavbarNavptions" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Item one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item three</a>
</li>
</ul>
</div>
</div>
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</div>
</nav>
https://www.codeply.com/go/9SK8ItOyzw
Related: Bootstrap 4 navbar with 2 rows
You can set the subtitle to position absolute to remove it from the normal content flow. It's unclear how it should look on mobile, I simply hide it in the media query. Example:
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
A Digital Onomasticon
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</a>
.navbar-brand small {
display: block;
font-size: 10px;
white-space: normal;
position: absolute;
}
#media (max-width: 575.98px) {
.navbar-brand small {
display: none;
}
}
JsFiddle

HTML nav menu background color

I am editing a Bootstrap template and I am trying to change the color of the navigation menu at the top.
I have this section of the code here:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://home.channeliser.com/Content/WebContent/images/logo1.png" alt="Channeliser" height="40" width="100"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</div>
</nav>
I tried using the navbarr class name in the CSS file to change the background but it did not work. Any help would be appreaciated.
.navbar {
background-color: red;
}
Without seeing all the CSS for the page it is impossible to know if that will work, but absent any other CSS it should do the job.
its work for me on Bootstrap 4
solve with remove the bg-light class
and add your own class
Example
your code :
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
</nav>
change to :
<nav class="navbar navbar-expand-lg navbar-light your-bg-navbar fixed-top">
//navbar item
</nav>
remove bg-light and add your own CSS
Add CSS :
.your-bg-navbar {
background-color: rgba(35,35,35,0);
}
rgba is for transparant color you can change solid
background-color: red or #rgbcolor
hope this work your for you to.
It's because .bg-light has a background colour with an !important so will override anything you try unless you also use !important:
.navbar {
background: red !important;
}
from experience, bootstrap css will all take superiority over your custom css except your add the !important tag at the end of the property. So the answer to your question is
.navbar {
background-color: red !important;
}
Alternatively,
You can add a custom css file replacing the bg-light class with you own custom class.