Bootstrap 4 search navigation bar not displaying on mobile - html

I have the below search navigation bar with links appearing to the right of the search bar. This works fine on PC but is not working on android or Iphone devices.
I have looked at the answer from here and tried using .navbar-header and encapsulating the links within the .collapse class but it didnt work, it just put everything on a new line and the searchbar goes right across the screen and doesnt fit to page -> https://stackoverflow.com/questions/40445515/navbar-not-visible-in-mobile-display/40445579#:~:text=1%20Answer&text=Your%20entire%20navbar%20is%20wrapped,being%20hidden%20in%20mobile%20widths.&text=navbar%2Dheader%20class%20where%20your,and%20logo%20should%20be%20placed.
<th:block sec:authorize="isAuthenticated()">
<form th:action="#{/logout}" method="POST" th:hidden="true" name="logoutForm">
<input type="submit" value="logout">
</form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="searchNavbar">
</div>
<form class="form-inline my-2 my-lg-0" th:action="#{/search}" method="GET">
<input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class"form-control mr-sm-2"
placeholder="What are you looking for " required />
<input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0"/>
</form>
<ul class="navbar-nav">
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" id="cart-link" th:href="#{/cart}">Cart</a>
</li>
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
</li>
</th:block>
</ul>
</div>
</div>
</nav>
</div>
The toggle suggestion appears to work but the search bar isnt limited to the div and goes all the way across the screen which then becomes scrollable - see the attached photo below:
Is there a way to have the search bar toggable but the links to appear above the search bar without needing to select the navbar-toggle button, only on mobile but on desktop to appear to the side of the Search bar i.e. just below the black line in the above photo and above the "Toggle" button?

Your question isn't really clear as to what your end goal is, but what you're missing is that anything inside .collapse.navbar-collapse is going to be hidden on mobile and you need a toggling mechanism to show it up. I've just added a button with the "Toggle" text and a data-target="#searchNavbar" to make sure your toggling works on mobile.
For obvious reasons, it's not looking very "pretty". But I think you can figure it out by adding proper layouting classes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<th:block sec:authorize="isAuthenticated()">
<form th:action="#{/logout}" method="POST" th:hidden="true" name="logoutForm">
<input type="submit" value="logout">
</form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#searchNavbar" aria-controls="searchNavbar" aria-expanded="false" aria-label="Toggle navigation">Toggle
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-header">
<form class="form-inline my-2 my-lg-0" th:action="#{/search}" method="GET">
<input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class "form-control mr-sm-2" placeholder="What are you looking for " required />
<input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0" />
</form>
</div>
<div class="collapse navbar-collapse" id="searchNavbar">
<ul class="navbar-nav">
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" id="cart-link" th:href="#{/cart}">Cart</a>
</li>
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
</li>
</th:block>
</ul>
</div>
</nav>

Related

Display search bar and search button inline with CSS

I'm building a little website (link) which displays a search bar in the navigation bar. I'm using Bootstrap 4 for the navigation bar controls, and Algolia Places for the search bar HTML input element. The problem is that I cannot align the search bar with the search button, even though I'm using form-inline. Also, the search results displayed when typing something in the search bar get cut off.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
Drinking Fountains
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Map
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="mr-sm-2" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#navbarMenu .form-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
... should do the trick.
or, using Bootstrap flex utility classes:
<form class="d-flex align-items-center flex-nowrap">
But, to also resolve the border-radius issue, you might want to change your markup to:
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-light" type="submit">Search</button>
</div>
</div>
</form>
Make sure the <button> is display:inline-block. And your input has max-width:100% instead of width:100%.
Also your .ap-dropdown-menu isn't Z-indexed properly above the map.
using Bootstrap:
wrap your <span> where search is and button with <div class="d-flex"></div>, and add to <span> class mr-2 for space you want.
Should be something like this:
<div class="d-flex">
<span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</div>
and
result

Jumbotron breaks navbar on mobile website

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

How to make a collapsible navbar with the links on the right hand side for big screens in Bootstrap?

I have made the navbar in Bootstrap with the links on the right hand side of the screen. Now I want to make the navbar responsive by adding the menu button to it. I have tried making a toggler class with breakpoint -md but by doing so my links appear on the left hand side on the big screens. Also, the button is not visible. Why, what am I doing wrong?
My code:
<nav class="navbar navbar-expand-md sticky-top fixed-top bg-white navbar-toggelable-md">
<div class="container">
<strong><a class="navbar-brand" href="#">Bhawna</a></strong>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarContent">
<ul class=" navbar-nav navbar-right">
<li class="nav-item active"><a class="nav-link active"
href="index.html">Work</a> </li>
<li></li>
<li class="nav-item"><a class="nav-link" href="about.html">About
Me</a> </li>
</div>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle"
onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</nav>
You had the following block outside the <ul class=" navbar-nav navbar-right">... </ul>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
Rest, you can style it your way... I have applied a border to the toggler button to show where it is
working snippet below
.navbar-toggler-icon {
border: 1px solid red;
color: blue;
}
span {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md sticky-top fixed-top bg-light ">
<div class="container">
<strong><a class="navbar-brand" href="#">Bhawna</a></strong>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarContent">
<ul class=" navbar-nav navbar-right">
<li class="nav-item active"><a class="nav-link active" href="index.html">Work</a> </li>
<li></li>
<li class="nav-item"><a class="nav-link" href="about.html">About
Me</a> </li>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
</p>
</div>

How to add functionality to search bar in Bootstrap 4 Dashboard Template

Just downloaded the Bootstrap 4 Dashboard template and are trying to add a form to the top search bar. When I do this the search bar shrinks and loses it's design.
Bootstrap 4 Dashboard template
It's probably down to html/CSS by I can't figure out how to accomplish this without breaking up the design, not that familiar with the new and added CSS in Bootstrap 4.
Tried this, but like I said, the form shrinks to the center:
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
<form action="search.php" method="POST">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</nav>
Just move the w-100 from the input to the form.
<form action="search.php" method="POST" class="w-100">
<input class="form-control form-control-dark" type="text" placeholder="Search">
</form>
Demo
This will make the form width:100%.
The input tag has width:100% which is a relative value. Now that you have added form tag as the parent of the input, it must have a width of 100% too.
Try replacing the code with this for testing (given inline css for now):
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-4 col-md-2 mr-0" href="#">My Site</a>
<form action="search.php" method="POST" style="width: 100%">
<input class="form-control form-control-dark w-100" type="text" placeholder="Search">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</nav>

Bootstrap 4 Alpha 6. Searchbox overflows container on navbar collapse

I'm pretty new Bootstrap 4, so there might be lots of mistakes here.
I want to create a responsive navbar which collapses my 4 menu buttons but still keeping the search bar to its right. I'm not sure yet how to deal with the display of the buttons after expanding, but my goal for now is to keep the search bar to the right with a correct width.
When the screen gets "small", the nav-toggle button shows up, collapsing the menu buttons. That's cool. But the search bar just grows off the container its in. How do I keep it within the container?
I appreciate any suggestions and improvements :)
nav {
background: brown;
}
nav .container {
white-space: nowrap;
}
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<nav class="navbar sticky-top navbar-inverse navbar-toggleable-sm">
<div class="container" style="width:1400px">
<div class="d-inline-block">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fa fa-home"> Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-music"> Music</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-info"> About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-address-card"> Contact Us</span>
</a>
</li>
</ul>
</div>
<form class="d-inline-block w-100" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by artist or album name">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</nav>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
EDIT: I tweaked around a little and got the following result -> https://jsfiddle.net/Taliesin84/qL35nejo/
My current objective is to prevent the Search bar from wrapping bellow the collapsed buttons when the size gets too small.
I also need to make the Search Bar wider in larger screen sizes, but that's secondary for now. Any new ideas?
From an example contained in Bootstrap 4's github repo:
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>