Bootstrap 4.1 floating logo between - html

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

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/

When logo is wrapped in an <a> tag in Bootstrap, navbar-toggler aligns left and under the logo image

I am new to coding and I appreciate this will be a very basic question. I am putting a very basic navbar together using Bootstrap 4. As per the documentation, I have been putting the logo image within an <a> tag and giving this tag the class of navbar-brand. My understanding is that when there is a logo item, it aligns left and the menu items i.e. links, align right by default.
In my case, I am using only a logo image and it all aligns correctly until I resize the screen to a smaller size and it changes to the navbar-toggler (which is what I want). When I do this though, the menu icon appears on the left, underneath the logo. I would like the toggler to appear on the right, as it appears in the bootstrap documentation. I have checked and there doesn't appear to be any padding or similar pushing it underneath it.
This is the code I have been using (the menu items are just placeholder for now while I get the functionality working)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img class="logo-img" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
</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 mr-auto"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a
>
</li>
</ul>
</div>
</nav>
I read a few other entries on here and someone had got around this by removing the <a> tag and applying the navbar-brand class to the image itself. When I do this, it works and the navbar-toggler aligns right as it should, only now the menu items when in large screen mode align-left alongside the logo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img class="logo-img navbar-brand" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
It was always my understanding that the navbar-brand class and logo image should be held within an <a> tag? When there is no image and it's the only text for the navbar logo, all the alignment works fine, it's only when there is an image.
Sorry for what is a very basic question - I'm learning to code at the moment so I am keen that I am getting the fundamentals right rather than hacking around things. Thanks in advance.

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%;
}

Bootstrap 4 collapsed navbar brand not centered

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