I am making a website and I want it to look nice when being used on mobile. However, I can't figure out to eliminate the excess white space on the right of the navbar.
Picture of the problem:
I have tried messing with the CSS of body and nav tags. Also, I tried to wrap sections of the code with div class="container-fluid">.
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin: 0;
width: 100%;
}
<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<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">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
When viewing this HTML using the Chrome Developer tool on the mobile (phone) view, there is lots of white space to the right of the navbar. But, I would like to eliminate all the white space and make it so the navbar expands to fill the space. This would end up looking a lot better when people access the website using their phones.
Your table width is larger than the parent container, you need to either adjust the css for the table to scale with the screen, or put the whole table into a scrolling div. I've put and example of scrolling div below, table css help 100% width table overflowing div container
<!DOCTYPE html>
<html>
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin:0;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<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">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<div style="overflow-y: auto;">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
This is because of padding , for div you are using width:100% and padding also applying so only you are getting scroll at bottom on normal desktop. clear padding for mobile view for td you will get good progress
Your table content is overflowing that is why that white space is coming if you want to remove that white space so you need to reduce the font size of table thread th text.
font-size: 12px;
<!DOCTYPE html>
<html>
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin:0;
width: 100%;
}
#media only screen and (max-width: 425px) {
.table thead th {
font-size: 12px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<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">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
Remove all the container-fluid classes first and replace them with "container" class.You have given 100% of width to nav class, remove it first.Then add one div before nav tag and end after nav ends.Try this out:
<div style=" width: 100%;">
<nav class="navbar navbar-expand-lg navbar-dark">
//NAV CONTENT
</nav>
</div>
You are using table box-sizing as content-box for nav, use border-box.
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
Border-box will allow to calculate the width inside element.
The table is also going out, so wrap the table inside a container.
You can see it working.
<!DOCTYPE html>
<html>
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"
/>
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
}
.table-container {
width: 100%;
overflow-x: scroll;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<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">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href="/f4">D</a>
<a class="nav-item nav-link active" href="/f1"
>E<span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<br />
<h2>Heading</h2>
<small>some url</small>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2>
<small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing</th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor</th>
<th scope="col">Eleifend</th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
I was not able to replicate your problem. However, based on the description you provided, you can resolve this issue by;
Removing the "container-fluid" class you added to one of your div tag.
Add a css style, that sets the body tag's width to "fit-content".
Hope this helps.
Related
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.
I need help with bootstrap container and row width.
I have created a container and a row inside it. I have everything inside the row, but for some reason content sizes are different as displayed on jsfiddle and image preview.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>xGhost.cz | Československý Gamehosting.</title>
<!-- meta data -->
<meta name="author" content="Jan Dvořák">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- styles -->
<link rel="stylesheet" href="css/style.css">
<!-- BOOTSTRAP START -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- BOOTSTRAP END -->
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="row">
<div class="col-lg-1">
<img src="img/xGhost.svg" alt="" style="width: 300px; height: auto;"/>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2">
<a class="navbar-brand" href="#" style="font-style: italic;">xGhost.cz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
<li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
<div class="row gx-2 mt-3">
<div class="col-md-8">
<div class="box">
<div class="box-heading">Novinky & Blog</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-heading">Přihlášení</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
text-align: center;
}
.nav-link:hover {
color: rgba(39, 174, 96, 1.0) !important;
}
.box {
width: 100%;
height: auto;
}
.box-heading {
background: #212529 !important;
color: #fff;
text-align: center;
padding: 7px;
width: 100%;
}
JSFiddle: https://jsfiddle.net/1c9w3taq/
Image preview
On the image you can clearly see, where the spaces are. It all should be aligned from side to side inside the container. Logo column width is missing a few pixels on the right and the two boxes in the bottom are not touching the sides of parrent container.
The problem is from this div.
<div class="col-md-8">
as well as <div class="col-md-4">
Yes they both equal 12 but they contain a margin.
To fix this you can add a class like this.
.nomargin{
margin: 0px !important;
}
And use the class like this
This will remove the default bootstrap margin.
I'm making a web page and I'm facing this issue, I have a nav bar which is fixed and working fine. I have two sections for now and when scrolled first section works fine but other one is overlapping the Nav which I'll show it to you via JSFiddle.
What I have tried so far is that to make the .items display as block but didn't get the solution.
Tried using position as absolute but it affected my view. So for now everything is working fine except this one that the section 2 which testimonial-one is overlapping the header the first section is working fine.
I have also tried using this nav-fixed-top in my bootstrap nav but it didn't work out.
.navbar { padding: 26px !important; position: fixed!important; width: 100%}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</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="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>
This is my JSFiddle link, kindly help me. Thanks. Link : JSFiddle Work
You can solve this by adding a z-index to your navbar. This will place the navbar on a "higher layer" than the rest of the content.
.navbar { padding: 26px !important; position: fixed!important; width: 100%; z-index: 10;}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</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="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>
I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<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">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.