I have a navbar menu in Bootstrap 4. When I resize the page, it resizes after a certain size threshold, but before it collapses, the far-right item "Opportunities" in the navbar is being cutoff.
In other words, it's cutting off items - it eventually collapses if the window gets too small - but before that, it's cutting off. See photo here:
Is there an easy fix here? Code below..
/* ------------------------------Navigation------------------------------*/
/* Navigation pills */
#navPills li{
padding:6px 6px 6px 6px !important;
font-size: 14px !important;
}
#nav-pills ul{
}
/* Navigation pills text*/
.btn.btn-s-md.btn-white.m-b {
font-size: 14px !important;
letter-spacing: .04em;
}
.navbar {
background-color:#f7f7f7 !important;
padding-bottom:10px;
border-bottom:1px solid #E6E7E8;
-webkit-box-shadow: 0px 1px 2px rgba(159,159,155,0.4)
}
#toggle {
background-color:none;
color:black;
}
.nav-item {
text-align: right;
padding:0px 10px 0px 10px
}
.nav-link {
text-align:left;
font-size:14px;
color:#0c2d1c !important;
}
#navbarNav {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<body>
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="people.html" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="research.html" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="publications.html" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="teaching.html" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html" class="btn btn-s-md btn-white m-b">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 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://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
Based on Bootstrap 4 docs for Navbar example (https://getbootstrap.com/docs/4.0/components/navbar/), I would erase your li classes as they seem to cause the overlap with the edge of the viewport to happen.
If you put these classes on your ul element you will have the same lg collapse and styling of buttons. See code below for the changes I am referring to.
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id="navPills" class=" nav-pills navbar-nav ml-auto btn btn-s-md btn-white m-b">
<li>
<a href="index.html">ABOUT
</a>
</li>
<li>
<a href="people.html">
PEOPLE
</a>
</li>
<li>
<a href="research.html">RESEARCH
</a>
</li>
<li>
<a href="publications.html">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html">
MEDIA
</a>
</li>
<li>
<a href="teaching.html">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
In a website I'm making with bootstrap, I need responsive spacing between the navbar( bootstrap ) and the content, in this case, a form as shown in the snippet below.
.curved-div svg {
position: absolute;
transform: scale(1, -1);
display: block;
z-index: -1;
}
.navbar-light .navbar-nav .nav-link {
color: white;
z-index: 2;
}
.curved-div {
height: 30vh;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="curved-div">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,197.3C96,171,192,117,288,117.3C384,117,480,171,576,208C672,245,768,267,864,250.7C960,235,1056,181,1152,160C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
My site
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/games">All blogs</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/contactus">Contact us</a>
</li>
Login
Register
</ul>
</div>
</ul>
</div>
</div>
</nav>
</div>
<form>
<input type="text" name="username" placeholder="Username"> <br><br>
<input type="password" name="password" placeholder="Password" id="password" oninput="passwordInput()" maxlength="255"> <br><br>
<input type="password" name="password2" placeholder="Retype password" id="password2" oninput="passwordInput()" maxlength="255"> <br><br>
<input type="email" name="email" placeholder="Email( We will not spam )" maxlength="321"><br><br>
<button type="submit" value="Submit" id="submit"> Submit </button> <span id="error"></span>
</form>
But the spacing between the navbar and form varies on all devices, and I want the content to always be out of the navbar's styling. I tried setting the height of .curved-div to percentage( % ) and viewport height ( vh ) but on emulating it in the chrome dev tools, neither worked and both gave the same output of not being responsive. Any help is greatly appreciated. Thanks!
So, this is a simples question. Why, even thougth i have a div that overtakes the length of window, i cant scroll down the page to see the rest of what that div contains? Never happened to me, tried to search some things but i cant find. I put all code because i dont know if its something of <meta name ....
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title>ITW 2021/22 - Driver Details</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<link href ="../Content/bootstrap-reboot.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<style>
.styles {
height: 400px;
width: 500px;
background-repeat: no-repeat;
background-size: cover;
}
#index {
background-size: cover;
background-image: url("https://images5.alphacoders.com/317/thumb-1920-317664.jpg");
background-position: top;
position: fixed;
height: 100%;
width: 100%;
z-index: -1;
}
</style>
</head>
<body id="index">
<nav class="navbar navbar-expand-lg navbar-light bg-opacity-10 fixed-top py-3" style="position:relative">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">
<img style="height:50px; width:65px;" src="img/f1-abu-dhabi-gp-2017-f1-logo-6614911-removebg-preview.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="home.html" style="color:white"><b>Home</b></a></li>
<li class="nav-item"><a class="nav-link" href="Circuits.html" style="color: white"><b>Circuits</b></a></li>
<li class="nav-item"><a class="nav-link" href="Drivers.html" style="color: white"><b>Drivers</b></a></li>
<li class="nav-item"><a class="nav-link" href="Timeline.html" style="color: white"><b>Champions</b></a></li>
</ul>
<div class="dropdown">
<a style="color: white" class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="FAQs.html">FAQ's</a></li>
<li><a class="dropdown-item" href="AboutUs.html">About us</a></li>
</ul>
</div>
</div>
</div>
</nav>
<br />
<div class="row" style="margin:auto">
<div class="container d-flex flex-row" style="margin:auto; min-width:50px; max-width: 600px">
<div class="py-3 container"><input class="form-control" Id="SearchText" placeholder="Search circuit" /></div>
<div class="py-3 container"><button type="button" id="clickCir" class="btn btn-secondary">Search</button></div>
</div>
<div class="d-none text-danger col-form-label container" id="NomeError">
<center><i class="fa fa-exclamation-triangle"></i><b>É necessário selecionar um circuito</b></center>
</div>
</div>
<div class="container" style="margin:auto; background-color:white; max-width:900px; min-height:900px; border-radius:10px;">
<div class="container" id="infoId" style="margin:auto; justify-content:center"> </div>
</div>
<script src="Scripts/bootstrap.min.js"></script>
<script src="../Scripts/knockout-3.5.1.js"></script>
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/jquery-ui-1.13.0.js"></script>
<script src="Circuit.js"></script>
Inside of your #index { } delete position: fixed; to be able to scroll.
Bootstrap Jumbotrons go out of the container on my website which means the navbar on the mobile version does not fill the screen. Other pages where I don't have a jumbotron this problem does not occur.
I tried using a Card instead, but that has some problems when I put it anything other than text
<div class="row">
<div class="jumbotron col-lg-8 col-md-12"
style='margin-left: 15px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px;'>
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
and for the navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Images of the problem
https://drive.google.com/file/d/0ByAYcnq6pPDmNlJsUUNBbkM1aFRITEQ5TUF4U0JxWXpOYVBV/view?usp=sharing
https://drive.google.com/file/d/0ByAYcnq6pPDmcnVsbTNMbkI2MnlNdmZocmtXV0FWbXpmUTdN/view?usp=sharing
* {
margin: 0;
padding: 0;
}
.banner {
background: #e9ecef;
}
#media only screen and (max-width: 767px) {
.display-3 {
font-size: 2rem !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="banner">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.
</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I have reduced font-size for small devices, it was getting out of the container. Also use .container > .row > .col-lg-12 [just for example] before using the main class. For reference go through https://getbootstrap.com/docs/4.1/layout/grid/ this link. Hope it'll solve your problem
what I want is in large device screen there should be one card in a row and same for mobile devices that are in small screen.
my bootstrap nav bar is working perfectly on the mobile device and large screen but with my cards, there is one issue, it's not shrinking to fit in small screen devices. I have to scroll to view the whole card.
here is my code for cards
<% include partials/header %>
<div class="row text-center" id="post-center">
<% posts.forEach(function(post){ %>
<div class="col-md-12 col-sm-12 col-xs-12" >
<div class="card" style="width: 25rem;">
<div class="card-body">
<p class="card-title float-left"><%= post.username %></p>
</div>
<img class="card-img-top" src="<%= post.image %>" alt="Card image cap">
<div class="card-body">
<p class="card-text"><%=post.description%></p>
</div>
</div>
<br>
</div>
<% }); %>
</div>
</div>
<% include partials/footer %>
and here is my header file code where I have my nav bar
<!DOCTYPE html>
<html>
<head>
<title>9tech</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<!-- Bootstrap Css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="/stylesheet/custom.css">
<!-- Font Awesome cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar static-top navbar-expand-lg navbar-light bg-primary">
<a class="navbar-brand" href="/" style="color:white;">9tech</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded ="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link " href="/posts" style="color:white;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" style="color:white;">About</a>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
<ul class="nav navbar-right">
<li class="nav-item">
Sign Up </i>
</li>
<li class="nav-item">
<i class="fa fa-user" aria-hidden="true"></i> Log In
</li>
</ul>
</div>
</nav>
I don't know where I am doing wrong
and here is my custom css file
ul li a {
color:white;
padding:5px;
}
html,body {
margin: 0;
padding: 0;
height:100%;
background-color: #E7ECF2;
}
#post-center{
display: table;
margin: 0 auto;
}
pls help.
Try to add width: 100% to the image.