I am using Bootstrap on my website. One of the things is the navbar. It works fine on desktop, iPhone etc., but on my iPad it looks like this (transparent background and white font):
What am I doing wrong?
I didn't use any CSS on it, so it's all Bootstrap's.
<nav class="navbar sticky-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">Kev's Kitchen</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="meetTheChef.html">Meet the Chef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
I see the problem. Just add
.navbar {display: block !important;}
to your CSS
You should start by cleaning up the header of your page. Accumulating all sorts of outdated garbage in your header is not exactly a smart idea...
Next step is to delete ALL contents of the app.css file and start using native Bootstrap classes to achieve what you want instead of manually overwriting everything. Native Bootstrap classes can get done pretty much everything you'll ever need.
P.S. It's always a bad idea to use the !important flag as suggested in the other answer. Using the !important flag suggests that you have no idea what you're doing. It is certainly not needed in this case.
Before you use this kind of stuff:
.container-fluid {
margin: 0;
padding: 0;
}
...you should learn about the Bootstrap grid and layout. Because then you'll realize that when you use Bootstrap the way it's intended to be used none of that custom css is necessary anymore.
Related
Below is a snippet of code from my html and css files on a website.
I want the navbar to be slightly transparent and the links to be centered on the navbar but my css wont apply to the navbar, just unsure why.
HTML
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Navigation bar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark transparent" id="navbar">
<a class="navbar-brand" href="index.html">
<img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<img src="images/ShopInsideBooking (4).png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</body>
CSS
#navbar{
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
Any help is appreciated :)
Right.
First thing you need is the good old !important on the background-color because bootstrap already have a bunch of styles and you won't be able to override them without it.
That fixes your issue with the transparency. You can also use opacity instead of background color if you're not changing the current color and the result is acceptable.
For the aligning of things, bootstrap has a few flex features (if you're using BS5) and you can make use of them.
One thing that I would do is to remove the <nav> from the div/row/col stuff because divs are not flex by design so you'll have to change the display of several elements or even add hacks with auto margin to get the output. Add the container directly on nav or navbar items, whatever you feel is suitable but remove the row/col because since it's a nav I'm assuming is the main nav.
Ok.
Once you remove the div/row/col you can just set the nav#navbar as flex and add a margin: 0 auto to it.
Like this https://jsfiddle.net/x1c0yanr/
nav#navbar {
background-color:rgba(0,0,0,0.5) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
EDIT: I realized after answering that you're using bootstrap 4 so I tested using BS4.4.1 as well. It works :D Take a look at flex. aligning, arranging, ordering. It's amazingly easy to to things using it. Here using BS4.4.1: https://jsfiddle.net/v3dn8cqu/
Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp\
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
What You'll Learn
</li>
<li class="nav-item">
Questions
</li>
<li class="nav-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
</html>
if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)
if your collapse is not working it's probably because you did not link bootstrap.js in your project
https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/
this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine
My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.
I really don't have idea how to fix it, this is my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I use default confirm dialog from primeNg without any changes:
confirm dialog
Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?
You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.
.ui-overflow-hidden {
position: unset !important;
}
I'm trying to get brand-item and nav-items aligned on mobile view.
Mobile view --> Aling wrong. Not centered. "Brand" should be vertically aligned with "link1-3"
Desktop view --> Aling should be like this
I have tried different things without luck.
This is one of the things I tried but it didn't work.
My code atm: Codeply.com
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link 2</a>
<a class="nav-item nav-link" href="#">Link 3</a>
</div>
</div>
</nav>
What I need to do to get brand-item and nav-items aligned?
Edit1: Updated 1. image & Better description of what I'm trying to achieve.
Edit2: Solution found! Every answer I got solves my problem. But dmbaughman's answer is simplest and is not disturbing other content on the website.
The problem is that the .navbar-brand link is not as wide as the links below, because it shares space with the menu icon on the right. If you just make the menu icon absolutely positioned, it will be removed from the document flow and the brand/links will align properly.
Current
Add these styles to .navbar-toggler
.navbar-toggler {
position: absolute;
top: 8px;
right: 16px;
}
Result
Because you are using the mx-auto and it's working correctly the center between the start of screen and the button at the right it's a little before....see the jpeg you will see that now it's centered because i removed the button the mx-auto find the center between two elements....
SO at first look you can usee margin style in percentual and move a little the brand at right...
Bye
Do this resolve your problem?
change the a brand in this way
<span style="margin-left:50%">Brand</span>
The result
I have a header that I plan to use on the top of all my pages. I'd like to keep it in a separate file (something I'm used to doing with php, but I'm new to the world of Bootstrap); however, I am not sure how I would handle dynamically assigning the active class to the nav-item that represents the current page. Does Bootstrap (4) have a baked-in solution for this sort of thing? I've been searching around but haven't found a good solution yet. Thanks in advance!
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">My Site</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 active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap includes some jQuery and is not just CSS. However, you can always run some JavaScript or jQuery on page load that toggles the class based on reading an element when the page is loaded. For example you could:
1) have an identifier on each page (eg. class name inside an element on a page that holds the page's name/value). Example:
<h1 class="page-lookup">
Home
</h1>
2) set you jQuery in a function to read for class and grab the value of the element with a .val(). Example:
const activePage = $(".page-lookup").val()
3) Add an id on each in your navbar to uniquely identify them. Example:
<li id="home-page" class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
4) Run a switch case that looks up the stored value (activePage) for a match. In the case that matches you can run jQuery to update the class to include the "active" syntax that will trigger Bootstrap's formatting.
Example:
switch (activePage) {
case Home:
$('#home-page).attr("class", "nav-item active");
break;
case About:
$('#about-page).attr("class", "nav-item active");
break;
}