I have written a navigation bar based on the example given in the components link in Bootstrap. But the navigation bar does not collapse in a right way as it is supposed to do. As shown in the process below:
State 1
State 2
State 3
the navigation bar is not collapsed sharply, rather, it will become 2 columns first and then collapse.
I have found a same problem that has been asked previously in stackoverflow. It seems like the problem is caused by the default breaking point defined in bootstrap. However, I do not know where to change the breaking point and how can I do it.
I am using the latest bootstrap version, and following is the snippet of my navigation bar code.
Thanks in advance for any help and advice!
<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a><!--end of logo-->
</div><!--end of logo & collapsing logic-->
<div class="collapse navbar-collapse" id="navItems">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul><!--end of menu list-->
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>
</form><!--end of search bar-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-refresh"></span> Update Profile</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul><!--end of sub menu-->
</li><!--end of dropdown menu-->
</ul><!end of the user account menu-->
</div><!--end of collpased nav-->
</div><!--end of container-->
</nav><!--end of navbar-->
Update
I have looked into the solution provide by this link, which does not work in the newest version of Bootstrap.
And I have locate the code block which defines the breakpoint of the collapsing effect:
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
And I tried to modify the defined min-width, however I changed, it just does not work.
I finally figured it out:
To do this in the latest version:
I have modified three parts in the css file:
First you need to set when the navbar-header will float to left (in may case 1000px):
#media (min-width: 1000px) {
.navbar-header {
float: left;
}
}
Then you will need to decide when all the menu button will be disappeared:
#media (min-width: 1000px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
Last you need to define when the navbar-toggle will take effect:
#media (min-width: 1000px) {
.navbar-toggle {
display: none;
}
}
Then just wait to see the magic happen:
When the screen reached the 1000px threshold:
From
To
Seems like you should be able to override the default navbar collapse point like this.. (Assuming 1000 pixels in the new collapse point):
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Demo: http://bootply.com/UQaiG0oNTR
I suggest installing Bootstrap with SASS, in this way mixins are separeted and easier to manage.
With this configuiration the breaking-point is in your _variable mixins, and the _navbar mixin just picks up the variable by default.
Overriding will work but it's probably neater if you keep coherency with bootstrap mixins.
Read the documentation that you yourself linked to!
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
Related
I am learning bootstrap 4 and found a navbar via this link: https://carrabbasatlanticcanada.com/
Have really struggled to find a scrollable nav for bootstrap4 that has styles changed on scroll (no logo and position fixed on mobile view).
I have created a navbar like the one in the link that uses 2 seperate navs that are styled so it works the same way: a visible nav and logo, then a scrollable nav with no logo, and fixed nav and logo on mobile devices.
I feel this is quite of a minimal code solution for bs4 and may get around problems with position sticky not working in internet explorer?
I am still fairly new to coding. Is this code OK?
Is it OK to use 2 seperate navs or is there a better solution using 1 nav and some javascript for styling?
Any feedback or possible improvement most welcomed!
HTML:
<nav class="navbar navbar-expand-md mynav">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="navbar2">
Home
News
Contact
</div>
<!--Javascript for scrollable nav-->
<script type="text/javascript">
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 120) {
document.getElementById("navbar2").style.top = "0";
} else {
document.getElementById("navbar2").style.top = "-50px";
}
}
</script>
CSS:
/Fixed navbar/
.mynav{
background-color: black;
}
.navbar .navbar-nav li a, .navbar-brand{
color: white;
}
.navbar-toggler{
background-color: green;
}
/*Scrollable navbar*/
#navbar2 {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: -450px; /* Hide the navbar 50 px outside of the top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar2 a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar2 a:hover {
background-color: #ddd;
color: black;
}
/media queries to make the pop down nav disappear on small screens and the hambrger to be fixed/
#media screen and (max-width: 600px){
#navbar2{
display: none;
}
.mynav{
position: fixed;
width: 100%;
}
.top-bar{
display: none;
}
.header-area{
background-color: #000;
height: 20px;
}
}
#media screen and (min-width: 600px){
#navbar2{
visibility: visible;
}
.navbar-toggler{
visibility: hidden;
}
}
i'm creating a website and want to have a hero image that takes up 100% height of the viewport at different device heights.
I have used the vh property in CSS to set both the bootsrap navbar and hero image to 100% of the viewport height, which has worked as intended but I think it's has some unintended consequences.
In a mobile view when I click the toggler to bring the mobile navbar down the height of the hero image adjusts, but when I try to close the navbar again the toggler completely dissapears, I think this is because of the hero image then trying to take the entirety of the viewport height not leaving space for the toggle icon?
The 100vh also means that the navbar cannot be sticky, when the screen scrolls past the hero image the navbar stays - it cannot pass the hero image.
I'm assuming both these issues stem from them both being encased in a 100vh div together, but have tried to find a solution to no avail.
Is there another workaround for what I am trying to achieve that would be better practice, or is there something I have done wrong in my markup.
HTML
<!-- Creates section for navbar and the hero image to take up 100% of the height of viewports - responsive and works at all screen sizes -->
<div class="landingBanner">
<!-- open the navbar -->
<nav class="navbar navbar-expand-md" id="home">
<!-- set content of the navbar fluid -->
<div class="container-fluid">
<!-- set the content of the navbar to width 80% -->
<div class="content" id="navbarContent">
<!-- hamburger button that appears in medium screens - click to toggle navbar so that it does not take up so much room on mobile devices -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<!-- font awesome hamburger icon -->
<i class="fas fa-bars"></i>
</button>
<!-- everything inside div is toggleable with the button -->
<div class="collapse navbar-collapse" id="navbarContent">
<!-- mx-auto centers the navbar -->
<ul class="navbar-nav mx-auto">
<li class=" nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item ">
<!-- One page referenced by using the ID of the target section -->
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<!-- drop down for acquisition criteria -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#whatWeDo" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">What We Do</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#whatWeDo">Information</a></li>
<li><a class="dropdown-item" href="acquisitionCriteria.html">Acquisition Criteria</a></li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="#theTeam">The Team</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#contactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End of navbar -->
<!-- Beginning of hero image -->
<section class="banner">
<div class="content bannerContent">
<!-- Puts logo to the responsive width of content -->
<img src="img/logo.png" alt="organization logo" id="logo">
<!-- div for arrow centers the arrow and puts it at the bottom of the div - responsive -->
<div class="arrow">
<!-- font awesome arrow -->
<i class="fas fa-angle-down"></i>
</div>
</div>
</section>
<!-- end of hero image -->
</div>
<!-- end of responsive landing section -->
CSS
/*
*
* navigation bar, branding and landing hero image
*
*/
.landingBanner {
height: 100vh;
width: auto;
}
.navbar,
.navbar-nav {
background-color: black;
text-align: center;
}
.navbar {
padding-top: 1%;
padding-bottom: 1%;
}
.navbar-brand {
color: #EA1830;
text-decoration: none;
}
.nav-link {
color: white;
margin-left: 5px;
margin-right: 5px;
}
.nav-link:hover {
color: #EA1830;
font-weight: bold;
}
.dropdown-menu {
background-color: black;
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: #EA1830;
font-weight: bold;
background-color: black;
}
.fa-bars {
color: white;
font-size: 30px;
}
#logo {
margin: 0 auto;
width: 100%;
height: auto;
}
.banner {
background-image: url("../../img/banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: auto;
}
.bannerContent {
padding-top: 5%;
text-align: center;
align-content: center;
color: #EA1830;
}
.bannerContent h1 {
font-size: 350%;
padding-bottom: 5%;
}
.arrow {
position: absolute;
bottom: 0px;
left: 50%;
}
.fa-angle-down {
font-size: 300%;
color: #EA1830;
}
Would really appreciate any help that someone may be able to provide, and hope it makes sense what i'm trying to achieve!
I'm new to web applications, so I don't know HTML, CSS and JS good enough to handle problems by myself yet. I followed some YT tutorial to create collapsible sidebar, but I don't know why it is collapsed as default and i can't make it opened. I think that the problem is that i don't know what exactly is going on in my code. Can you tell me what I'm doing wrong and help me understand how this should work?
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<i class="fa fa-fw fa-gamepad"></i> Select something</a>
<ul class="collapse list-unstyled">
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-home"></i> Home
</li>
<li>
<i class="fa fa-fw fa-user"></i> My profile
</li>
<li>
<i class="fa fa-fw fa-question-circle"></i> FAQ
</li>
<li>
<i class="fa fa-fw fa-phone"></i> Contact
</li>
<li>
<i class="fa fa-fw fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- some code -->
</div>
</div>
CSS:
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 0;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
#sidebar-wrapper .sidebar-header {
padding: 20px;
background: var(--black);
}
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
transition: 0.15s;
color: black;
}
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
.sidebar-nav{
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
display: block;
text-decoration: none;
color: var(--gray);
}
.sidebar-nav ul li a {
font-size: 0.9em;
display: block;
color: var(--lightGray)
}
.sidebar-nav li a:hover{
color: #fff;
background: var(--gray);
}
.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: var(--deepBlue);
}
JS:
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
Ok, I'll tell you how to achieve what you want (2 methods) and then I’ll explain how your code works.
method 1
in your first div (#wrapper), add the class menuDisplayed:
<div id="wrapper" class="menuDisplayed">
method 2
you can also change your CSS to do what you want and make the "menu displayed" the default style:
replace "menuDisplayed" with "menuHidden" throughout your code, so that it continues to make sense semantically
update styles for #sidebar-wrapper giving it a value other than 0 for width.
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 250px;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
now change styles for #page-content-wrapper too, so that it leaves room for your sidebar:
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
padding-left: 250px; /* leaving 250px of space on the left */
transition: 0.15s;
color: black;
}
the next step is to make the closed sidebar have the right styles:
#wrapper.menuHidden #sidebar-wrapper{
width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}
#wrapper.menuHidden #page-content-wrapper {
padding-left: unset; /* clears the attribute that gave space to the sidebar */
}
now I'll explain how your code works (before you change the sidebar behavior):
your CSS tells the browser that the element with the sidebar-wrapper id should have null width (so it does not appear as soon as you load the page), but it also says that the element with id sidebar-wrapper should be 250px wide when inside another element that has the wrapper id and the menuDisplayed class.
the magic is in your javascript: it tells the browser to toggle the menuDisplay class of the element with id wrapper, which activates the CSS style that makes your sidebar 250px wide, and so it appears. when toggled again, the menuDisplayed class is deleted from the element with id wrapper and your sidebar returns to having width equal to 0.
the $("#menu-toggle").click adds an event listener for the 'click' event using jQuery. when this event is fired (someone clicks in the element with the menu-toggle id), the callback function is executed:
function(e){
e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
$("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}
You can add the class menuDisplayed to the navbar (with id #wrapper) initially, so on page load, it will be displayed.
<div id="wrapper" class="menuDisplayed">
you should add the class menuDisplayed to your #wrapper. then it can show by default.
<div id="wrapper" class="menuDisplayed">
full example can be found here :http://jsfiddle.net/9ojvnutc/
Hi all I want to know if the following is possible. I am using bootstrap frame work to build a simple webpage. In the CSS I have borders on certain div elements showing as gray however when I view from the mobile a few of these divs are hidden and the border property looks very out of place. I would like to know if there is a way to target CSS elements with bootstrap so if a page is re sized to mobile the border color changes to black or doesn't show at all.
Here is a sample of my code.
HTML
<div class="container">
<!--Strt of row-->
<div class="row">
<!--leftdiv1-->
<div class="col-sm-6" id="left1">
<h3 class="text-center" id="main">XXXXXXX</h3>
<p class="text-center">XXXX & XXXXX</p>
</div>
<!--rightdiv1-->
<div class="col-sm-6 hidden-xs contacts" id="right1">
<ul>
<li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
<li><span class="glyphicon glyphicon-save-file"></span> Download</li>
<li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
</ul>
</div>
</div>
CSS
#left1 {
border-right: dashed grey 3px;
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
#right1 {
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
Yes, as I see you are trying to hide the col-xs so the size is <768px See Bootstrap CSS So you would add a #media in your css. This will work:
#media (max-width: 768px) {
#left1 {
border-right: 0px;
border-bottom: 0px;
}
#right1 {
border-bottom: 0px;
}
}
You can put an extra class on the element for example: hidden-xs. It is build in bootstrap.
http://getbootstrap.com/css/#responsive-utilities
I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.
I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.
In particular how would I create a search nav bar in Bootstrap 3 with the following features?
On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
On Focus HTML drop down would show similar to Google Developers site.
I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:
On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).
I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/), but i'd like to implement this with the bootstrap classes already in place.
Here's what I have so far with a help from Fizzix:
JSFiddle Demo
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Others <span class="sr-only">(current)</span></li>
<li>Categories</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
CSS:
body {
margin: 20px;
background: #455a64;
}
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
Your question will most likely be closed since you have not tried to do this yourself first and you're basically asking us to do all the hard work without any attempt
I tried to mimic most of the styles, although the placeholder colour is the tricky part. Instead, I added the value of Search to the input and styled the colour. You can handle the placeholder part through Angular instead.
Unfortunately I'm strapped for time at the moment and am unable to get the dropdown working on focus.
If you would like a full breakdown of the CSS, just let me know and I can go through it step by step with you.
WORKING DEMO
CSS:
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
HTML:
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>