Adding a subtitle to a Bootstrap Navbar - html

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

Related

Css wont apply to bootstrap navbar

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/

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.

Why is my bootstrap navbar-expand-sm navigation covering content?

We are having trouble with our responsive navigation covering content.
When the user toggles the navigation button, we want it to push the H1 and down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our "Denver Moving and Storage" content.
We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This is our code:
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I don't know if your body CSS is affecting it or not, since you didn't post that out. But just by looking at your HTML, I see something wrong with your button toggler:
<button ... data-bs-toggle="collapse" data-bs-target="#responsive-navbar" />
Where did you get this kind of syntax from? In Bootstrap documentation, there is no -bs on the data attribute.
In order for the toggler to work properly, you need to remove -bs.
Minor improvement
Your "free estimate" button. Bootstrap has a button style to make an anchor tag look like a button. You don't need to wrap a button with an anchor tag. You can change it to something like:
<li class="nav-item">
<a class="btn btn-success" href="free-estimate.html">Free Estimate</a>
</li>
demo: https://jsfiddle.net/davidliang2008/p4ofdcae/8/

Bootstrap expand on lg with a set height fails on small screens

I have a bootstrap 4 navbar which is set to expand on lg and collapse on small devices. This works on a default navbar height but whenever I set the navbar to a height smaller than the default height the expand for the small devices doesnt work...
HTML-Code:
<header style="background-color: blue;color: white;font-size: 14px">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
<ul class="navbar-nav mr-auto flex-row justify-content-start">
<li class="nav-item">
<a href="#" class="mr-4">
<i class="fa fa-twitter-square fa-lg"></i>
</a>
</li>
</ul>
<a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-road"></i>
</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto d-flex">
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home2 <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</header>
The content is also not set in the middle. What am I missing out?
The above shows the following. Even the expand fails
I want to define the height as 30px and i want the content to center vertically in the set height.
Actually Bootstrap navbar height is not defined by a CSS height property, but it changes with <a> padding and their content.
Try to add py-0 CSS class to <a> of your navbar to remove padding top and bottom.
See this example: https://codepen.io/navalex/pen/jOPXxor
Setting the height to 30px here is causing your issue:
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
Here is a codepen that shows your code in a standard boostrap4 template with that inline style commented out:
codepen

Is there a way to make navbar logo responsive?

So, here is the website I've built using bootstrap 4.
I have a big issue with the logo, as it keeps the same size on all devices.
I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my css:
.navbar .navbar-brand {
padding: 5px 200px;
}
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}
This is my html:
<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
<!-- Brand/logo -->
<a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
<button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarLg">
<!-- Links -->
<ul class="navbar-nav float-right text-right pr-3">
<li class="nav-item">
<a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
</li>
</ul>
</div>
</nav>
That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!
I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.
This will let allow you to position your nav items to the right using a css class I added called .navbar-right.
But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)
Hope this helps.
.navbar-right {
position: absolute;
right: 0;
}
.relative {
position: relative;
}
#media only screen and (max-width:768px) {
.navbar-brand {
max-width: 100px;
}
/* below is for the demo but might help you position
the hamburger menu on mobile */
.navbar-toggler {
right: 0;
position: absolute;
margin: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container relative">
<div class="row">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav navbar-right">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
The best option would be to create diffenrent images files for different view port sizes.
With the srcset attribute, you can select which image should show in which case.
Here an example:
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="my company">
You give the name/location of the image file, followed by a space and the view port size, when the image should show. It describes until which width (that's why it's w) the image should show. The example above translates to:
the small.jpg is shown until a view port width of 320px
the medium.jpg is shown until a view port width of 600px
the large.jpg is shown until a view port width of 900px
More detailed information can be found here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
The positioning can be archieved by the information form brooksrelyt's answer
I solved this problem using an vw units width of image.
This allows the element's aspect ratio to be preserved, based on the viewport width
.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;
}