I have a web app that I'm working with where the Nav bar's height doubles in size on a mobile view. Here's what it typically looks like:
And here's what it looks like an a mobile view:
What can I do to prevent this resizing? Is there a way to make the header and logo responsive based on screen size? Here's the code I've got:
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
What am I missing here?
use media queries to control the bootstrap Responsive breakpoints
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
#media (min-width: 100px) and (max-width: 400px) {
.navbar-brand {
font-size: 1em;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You need to add a media query that reduces the font-size of the 'cyclone analytics' on smaller devices. The reason the nav bar is getting bigger is because the hamburger is being wrapped onto a new line.
So if you add a media query along the lines of:
#media only screen and (max width: 700px) {
.navbar-brand: font-size: 1rem;
}
It'll work because the main logo is smaller, so the hamburger isn't being wrapped. Hope that helps. :-)
Related
Can I customize following breakpoint using bootstrap ?
Code :-
<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
<a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
<div class="fixed-nav">
<ul class="navbar-nav ">
<li id="nav-1" class="nav-item ">
<a class="nav-link" href="#">AAAAA</a>
</li>
<li id="nav-2" class="nav-item">
<a class="nav-link" href="#">BBBBB</a>
</li>
<li id="nav-3" class="nav-item">
<a class="nav-link" href="#">CCCCC</a>
</li>
</ul>
</div>
</nav>
But when I override this by adding,
#media screen and (min-width:633px) and (max-width:1072px) {
.collapse {
display: none !important;
}
}
to its style.css. Then navbar collapses at my custom breakpoint (1072px). But still hamburger icon appears when it reaches to -lg (≥992px) . So I need to know is, is there any method to collapse at custom width also appearing the hamburger icon.
Thanks !
If you give lg , sm, xs or xl after navbar-expand class navbar expands automatically by it's custom value. For example if you write navbar-expand-lg value to the nav class it collapses at 992px width or if you give navbar-expand-md it collapses at 768px. You can inspect codes below . I hope it works for you.
button.navbar-toggler {
background-color: white;
}
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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>
<title>Bootstrap</title>
</head>
<body>
<nav style="background-color: black;" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">AAA</a>
<a class="nav-link" href="#">BBB</a>
<a class="nav-link" href="#">CCC</a>
</div>
</div>
</nav>
</body>
</html>
As you can see dark red border around toggle button
I use
.navbar-toggle
{
border : none;
outline : none;
}
to remove it but nothing works.
Below given my html code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<!-- <link rel="stylesheet" -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
<title> Agency website </title>
</head>
<body>
<section id="navbar">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="/logo.png" alt="website"></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> -->
<i class="fas fa-bars"></i>
<!-- <i class="fas fa-tree"></i> -->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Testinmial</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/355cdf5292.js" crossorigin="anonymous"></script>
</body>
</html>
Below css code
margin:0;
padding:0;
}
/* navigation bar section */
#navbar
{
position:sticky;
z-index:10;
background-image: linear-gradient(to right ,#9517ba ,#5f1782); /* yaha ni chali yeh line ( doubt ) */
}
.navbar
{
background-image: linear-gradient(to right ,#9517ba ,red);
padding: 0px;
}
.navbar-brand img{
height:50px;
width:100px;
/* color:blue; */
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
color:white ! important;
/* float: right; */
text-align: right;
}
.fa-bars
{
color: #fff;
font-size: 20px !important;
}
.navbar-toggler
{
outline:transparent;
border-color:transparent;
padding:0;
background: none;
}
You should set outline: none for focus state also:
.navbar-toggle:focus {
outline: none;
}
.navbar-toggle::-moz-focus-inner {
outline: none;
}
I'm wanting to remove a strange white line that appears at the bottom of a navbar in the header of my page. The header has a dark background, but when I click on the toggler button a strange white line appears at the bottom of the header.
You can see my webpage here:
abdelp.github.io
In the image below is indicated the line that I don't know where is coming from and I want to remove:
the HTML index is just the bootstrap initial template and the navbar template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Abdel Pérez</a>
<button class="navbar-toggler navbar-dark" 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 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="site-banner site-banner--dark">
<div class="site-banner__inner anim anim-up anim-fade loaded">
<div class="site-banner__content">
<h1 class="site-banner__title">
My Projects
</h1>
</div>
</div>
</section>
<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>
</body>
</html>
And this is the css
/* Header */
.header {
background-color: #191a1d;
}
.site-banner--dark {
padding-bottom: 50px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
border-bottom: none;
background-color: #191a1d;
}
.site-banner--dark .site-banner__title {
color: #fff;
}
.site-banner--dark .site-banner__tagline,
.site-banner--dark .site-banner__subtitle {
color: #ababab;
}
I'm telling you my personal opinion and the solution I got:
This is most likely related to the browser's rendering engine. So we can call it a kind of bug, albeit partially.
I have encountered such situations in many browsers while playing with the scale of SVGs.
For the solution of this situation, superimposing the two elements is an excellent result.
So instead of intersecting two elements, they must be nested 1px.
I marked the required encodings for this as /* Added */ in the CSS section of the snippet.
If you want, you can test the fluency of the animation by running the snippet.
Good luck with.
/* Header */
.header {
background-color: #191a1d;
}
.site-banner--dark {
/* Added */ margin-top: -1px;
/* Added */ padding-top: 1px;
padding-bottom: 50px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}
.site-banner--dark {
border-bottom: none;
background-color: #191a1d;
}
.site-banner--dark .site-banner__title {
color: #fff;
}
.site-banner--dark .site-banner__tagline,
.site-banner--dark .site-banner__subtitle {
color: #ababab;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Abdel Pérez</a>
<button class="navbar-toggler navbar-dark" 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 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="site-banner site-banner--dark">
<div class="site-banner__inner anim anim-up anim-fade loaded">
<div class="site-banner__content">
<h1 class="site-banner__title">
My Projects
</h1>
<h2 class="site-banner__subtitle">
<!-- For over 10 years I’ve been designing and developing websites. Below are some of my favourites. -->
</h2>
</div>
</div>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
I have a problem with a navbar from Bootstrap. I don't understand why but when I put this webpage on mobile view the Bootstrap Navbar collapse doesn't show when i click on the button on the right ...
Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="nav.css">
<link rel="icon" href="favicon.ico">
<title>SmartHorse | Accueil</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://kit.fontawesome.com/f7131c55f8.js" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="Logo_V2.jpeg" alt="cheval" class="nav-logo image-logo">
<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">
<a class="nav-link" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blockchain.html">La technologie blockchain</a>
</li>
<li class="nav-item" style="background-color: white; height: 23px; width: 23px; margin-top: 8px; margin-left: 8px">
<img src="https://www.makrea.com/img_pngs/RS03.png" alt="logo linkedin" style="width: 25px; padding-bottom: 5px">
</li>
</ul>
</div>
</nav>
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Thanks a lot in advance for your help !
I copied the code to my editor and opened the file, I don't see any issue here, works as expected. What Browser are you viewing the file on? Or perhaps you don't have a body tag? You only seem to have the closing body tag.
Tablet - https://imgur.com/gX0SFxv.jpg
Mobile - https://imgur.com/rl12X8r.jpg
Thanks guys !
The problem came from my CSS I put the property (position: absolute left 74%) to my ul hence the problem on mobile view.
Im using Bootstrap 4. My goal is to make navigation with toggler on left, text on center and text on right. The problem is that after I click toggler to reveal navigation, it's pushing down my navigation elements. What I noticed is that without changes in order property it's working good and not pushing down elements but Im trying to do this with order property as it looks simple and clean.
body
{
margin: 0;
padding: 0;
}
/* Navigation Start */
.navbar-bg-custom
{
background-color: red;
}
.navbar
{
justify-content: space-between;
}
.navbar-brand
{
order: 2;
}
.navbar-nav{
}
.icon
{
order: 3;
}
.navbar-brand img
{
height: 80px;
}
/* Navigation End */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-light navbar-bg-custom">
<a class="navbar-brand" href="#">This is getting pushed down on </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 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>
</ul>
</div>
<div class="icon">
This too
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I tested your code on my machine and got to know that when I remove the external style at least, the navabar brand is on it's position.
I can assure you that if you avoid giving dimensional attributes like margin, padding or positional attributes to your html elements using your css code while using bootstrap, you won't face this issue.
I'll suggest you to use styles and dimensional attributes of bootstrap library in most of the cases.
The dimensions specified by you cause a deviation in the bootstrap's properties
Just let me know if this answer was helpful.