Bootstrap Navbar overlap using transforms in Safari - html

I'm struggling with the problem of a transformed div overlapping a bootstraped navbar, illustrated below. Does anyone know why this could be happening?
It happens in safari but not in Firefox or Chrome. It also doesn't happen when there are no transforms applied to the div.
I'm using bootstrap 4 and tailwind.css. I've included the code below. Thanks.
Grateful for any pointers, thanks.
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
nav item
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

Can you please check the below code link? Hope it will work for you. You have to add position and z-index in the parent element .place-self-center and its child element .place-self-center .bg-transparent.
Please refer to this link: https://jsfiddle.net/yudizsolutions/Lj482t1p/2/

Related

How to align an item in navbar to the center in HTML

I would like to move this h5 element such that it always hangs in the middle of the navbar. How can I control that. This is the HTML from a shared layout file that will be shared across all pages. Thank you
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ProjectX1</a>
<h5 class="display-6 navbar-text">#ViewData["NavbarTitle"]</h5>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial.cshtml" />
</div>
</div>
</nav>
<div class="w-100 d-flex justify-content-center " >
<h5 class="display-6 navbar-text text-center">#ViewData["NavbarTitle"]</h5>
</div>
You only need to remove navbar-collapse of <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">...</div>.
you can use flexbox:
nav > .container{
display: flex;
justify-content: space-between;
}

HTML navigation bar inline items on mobile

This is my navigation bar (uses Bootstrap 4):
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 0px; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
So except the main title Cars Shop, there are three more items:
Cars (aligned from the left)
Engine (aligned from the left)
Log Out button (in the top right corner)
On desktop it looks good, but when I switch to mobile (or resize window appropriately), the three items disappear completely. Is there any way to make this navbar a bit more user friendly?
As far ad I understand the problem is that you are using a collapsed navbar without the ability to open it after it collapses. I fixed it like this for a collapsed menu (you will need to change up your style a bit to make it look good):
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 3em; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
I would also recommend doing the CSS in a separate file if you aren't already and maybe try to use em, vh, vw instead of px.

Make Bootstrap navbar brand on its own row resizable with images

I found a way online to make a Bootstrap navbar on two rows, with the navbar-brand on its own row:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-light flex-column align-items-stretch">
<div class="d-flex">
My website
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="container">
<div class="navbar-collapse collapse" id="navbarContent">
<div class="navbar-nav nav-fill px-lg-5 mx-lg-5">
Link here
Link here
Link here
Link here
</div>
</div>
</div>
</nav>
(It collapses on small screens, so view as a full page to see it in action)
Now that I got that working, there are two things that I want to accomplish:
Have two scalable images flanking the navbar-brand (on either side of it). They should be as tall as the navbar-brand is (plus maybe a little margin up and down)
Have the text of the navbar-brand scale with the size of the window. I would set a max size (like font-size: 300%), but it should scale as the window width shrinks
What I have so far is responsive font-sizes for the different window widths using bootstrap breakpoints (see below, although for some reason it's not working in the code snippet. Perhaps because I'm overriding bootstrap code. Or perhaps SO code snippets don't allow SASS includes...)
It would be nicer if it would gradually scale, instead of just at the above breakpoints. Also, I'm not sure how to do this with images, so that they're at the same height as the text. How do I do this? I'm not so familiar with flexboxes, which is how this two-row navbar seems to be implemented. I tried looking into it, but I'm getting confused. Right now all I can figure to do is have a set height for the images.
Here is what I have so far:
.navbar-brand {
font-size: 100%
}
.navbar img {
height: 100px;
}
#include media-breakpoint-up(md) {
.navbar-brand {
font-size: 250%;
}
}
#include media-breakpoint-up(lg) {
.navbar-brand {
font-size: 300%;
}
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-light flex-column align-items-stretch">
<div class="d-flex">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png">
My website
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="container">
<div class="navbar-collapse collapse" id="navbarContent">
<div class="navbar-nav nav-fill px-lg-5 mx-lg-5">
Link here
Link here
Link here
Link here
</div>
</div>
</div>
</nav>
Surrounding your logo-text with 2 images can be done simply by adding them into the ancher tag like so:
<img src=""> Logo-text <img src="">
If your navbar has a height set you can make your img responsive ( scalable ) with this code:
a img { width: auto; height: 100%;}

Cant Make the Image fit Parent Element

I'm new to bootstrap 4. I'm trying to build a responsive website using bootstrap for practice. I have an issue with my image not resizing to fit the screen.
<html lang="en">
<head>
<!-- Required Meta Data -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;700&display=swap" rel="stylesheet">
<!-- Bootstraps CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Custome CSS -->
<link rel="stylesheet" href="app.css">
<title>Museum of Candy</title>
</head>
<body>
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
CANDY
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navLinks" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUR
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="text-white text-center d-none d-lg-block">
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
<h2 class="">MUSEUM OF CANDY</h2>
</div>
</div>
<div class="col-lg-6 px-0">
<img class="img-fluid" src="imgs/img1.jpg" alt="Hand Donut">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- JQuery First, Then Popper.js, then Bottstarp JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In this my image is not covering the entire column space and leaving a portion.
even when i resize the screen to medium resolution image is not covering full screen
when i try to add css to it they are being crossed of.
CSS File
body{
background: #f5d9d5;
font-family: "Nunito", sans-serif;
}
#mainNavbar{
font-size: 1.5rem;
font-weight: 100;
}
#mainNavbar .nav-link{
color: white;
}
#mainNavbar .nav-link:hover{
color: #EA1C2C;
}
#mainNavbar .navbar-brand{
color: #EA1C2C;
}
<img class="img-fluid" style="float:right;" width="100%" src=...>
This will make the image fit the parent div
and should probably solve your issue

Bootstrap container, grid rows width and a padding issue

I'm creating my first bootstrap frontend, and I'm experiencing some issues which I'm not able to solve:
The row expanding to the whole width of the container, the max column width (12 units) will not extend to this width:
Further on, why is within the container writing over the padding:
Any hints appreciated!
I already tried to use container-fluid class, but the row seems not to get the max width.
Whole HTML:
<!DOCTYPE html>
<html>
<head>
<title>Snoo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Snoo!</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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reddit!</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col_xl-12">
<div id="content">
<h1>Snoo!</h1>
<hr>
<h3>A chatbot based on a million reddit comments, quiet salty!</h3>
<button class="btn btn-primary btn-lg">Learn more!</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
css:
#content {
text-align: center;
padding-top: 25%
}
your class name wrong col_xl-12 to change class name col-xl-12
https://v4-alpha.getbootstrap.com/layout/grid/
I'm seeing a typo, try to change:
col_xl-12 to -> col-xl-12
Remove container from your coding. Then the row will have full width
your class should be col-*-*, but you used col_xl-12
The HTML Structure Will be:
<div class="row">
<div class="/* Container or Container-fluid or Col-* */">
</div>
</div>