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/
Related
Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<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">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
Login
</li>
<li class="nav-item">
Other Service
</li>
<li class="nav-item">
My Blog
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
Either add justify-content-center next to navbar-expand-sm and see if this is working
Or trying adding the respective CSS
.navbar-expand-sm { justify-content: center !important; }
can anyone help me find a bug in bootstrap container fluid which i just need to add some padding but not working
the code only works when we use
.container-fluid {
padding: 3% 15% !important;
}
if we remove !important it is not working do you know the reason
i will share the code below
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup" />
</div>
</div>
</div>
</section>
the css code is
#title {
background-color: #ff4c78;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: "Montserrat", sans-serif;
font-size: 3rem;
line-height: 1.5rem;
}
This usually happens if you've placed the link to your own custom style sheet or defined custom CSS styles inside the <style> tag before linking the style sheet of Bootstrap. The browser follows a top-down approach while rendering the pages and so any CSS styles that share the same name (in your case: .container-fluid) with the style of another style sheet, then your custom CSS styles will be overwritten by the styles in the last style sheet.
Solution: Place the link to your custom style sheet after linking all the other style sheets like that of Bootstrap, Font Awesome, etc.
If you could include the code that you put in between the <head> tag, I could confirm this.
P.S. I see you're doing the TinDog project so you're probably following Angela Yu's course. Here's the GitHub link to my code for reference.
I am building a Bootstrap 4 site using Jekyll. I have a jumbotron on each page which is working as a hero header. Everything works great until I resize to a mobile viewport. At this point the jumbotron gets tucked beneath the fixed header instead of occupying its own space beneath it. As shown in image.
When I unfix the header, the flow behaves normally. I have yet to make any style changes. So far all I am working with is Bootstrap HTMS and default stylings
How can I prevent this from happening whilst retaining a fixed header? I have posted both the body and nav HTML that I am using within Jekyll to build the pages.
Sincere thanks in advance for any pointers :)
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<!--Site logo-->
<a class="navbar-brand" href="#">Thomas Bishop</a>
<!--Collapse nav on mobile viewports-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Nav links-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--Home-->
<li class="nav-item active">
<a class="nav-link" href="{{ site.baseurl }}/">Home <span class="sr-only">(current)</span></a>
</li>
<!--Services-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/services">Services</a>
</li>
<!--Expertise-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/expertise">Expertise</a>
</li>
<!--Blog-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/blog">Blog</a>
</li>
<!--About-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/about">About</a>
</li>
<!--Contact-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
---
layout: default
title: Content Usage Policy
permalink: /content-usage-policy
---
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron jumbotron-fluid bg-light">
<h1 class="display-4 d-flex justify-content-center">Content Usage Policy</h1>
<p class="lead d-flex justify-content-center">Optional sub-heading or meta description</p>
</div>
</div>
</div>
</div>
As you are using class jumbotron it's providing padding-top: 4rem in large devices and padding-top: 2rem in small devices that's why your content overlap with the header in the small devices.
FYI as position: fixed is applied on the nav, for the other elements on the page nav does not exist so your next div will also start from top: 0. Inspect the element and view <div class="container-fluid"> you can see it also started from top:0. To fix this issue do the following:
body > .container-fluid {
padding-top: 40px;
}
By applying this css, gap between nav and content will increase and if you don't want this extra gap than instead of applying above css rule just apply this for small devices.
#media (max-width: 576px) {
body > .container-fluid {
padding-top: 20px;
}
}
And place this css such that it will load after the bootstrap's main css.
Simply apply a margin-top or padding-top equivalent to your fixed header height to your jumbotron using a mobile media query. Here is a link to a pen detailing a fixed header behavior.
I have created a floating logo in Bootstrap 4 navigation, but unfortunately that breaks the "navbar-toggler button", this sould be right aligned on the right, but on small screens it comes under the logo on the right side...
Here the code that I have tried:
.navbar-brand {
position: absolute;
padding-top: 100px;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand abs" href="#"><img src="assets/img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" 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" id="navbar1">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#">lorem<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">lorem</a>
</li>
</ul>
</div>
</div>
</nav>
When you se position: absolute to an element
The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to its closest positioned ancestor, if there is one; otherwise, it is located relative to the initial container block . His final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned elements can have margin, and do not collapse with any other margin.
so when you set .navbar-brand {position: absolute;} it is removed the normal flow of the document and navbar-toggler is the 'only' child .container that has display: flex; and justify-content: space-between; (this is why navbar-toggler is on the right when you have other child inside .container).
to avoid the actual behavior you can do a lot of thing that depends on what are you expecting. try removing the position: absolute from the brand, adding more elements to the nav in order to get the toggle to the right, anyway the solution depends on what you want to achieve.
I hope I gave you an idea
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