Develop Reference

Styling Two Individual Navs

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;
}
}

Bootstrap navbar disappears when in a div where it should be always visible

Sorry for the bad title, I didn't really know how to explain it concisely.
I'm trying to make a navbar that only shows up when hovering over an icon that appears only when scrolling upwards and stays visible as long as I have my cursor over it (over the navbar or the icon).
The problem is, I want it to be always visible in the first section of the website.
It works ok when first loading it, but after scrolling down and then returning up when I hover over the navbar and then I move the cursor outside it disappears.
Here's a fiddle so you can take a look: https://jsfiddle.net/kksp9pbu/1/
Here's the HTML:
<div id="menu-trigger" class="hidden-menu trigger"><i class="fa fa-bars"></i></div>
<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="container-fluid">
<div class="row">
<div class="col-xs-12" id="header">
<h1>The navbar should always be visible here</h1>
</div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="about">
<div id="about-l"><h3>About</h3></div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="portfolio">
<div id="about-l"><h3>Portfolio</h3></div>
</div>
</section>
CSS in case you need it:
#menu-trigger {
position: fixed;
top: 15px;
height: 40px;
right: 20px;
z-index:1;
cursor: pointer;
}
.fa-bars{
color: #fff
}
#main-nav {
height: 70px;
background-color: rgba(0, 119, 124, 0.46);
border-bottom: 3px solid #111;
}
.navbar-fixed-top {
top:0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-nav {
top:-75px !important;
}
.trigger {
opacity: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-menu {
opacity: 0;
}
#main-nav a:link,
#main-nav a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
}
.navbar-nav {
margin-left: 80px;
}
.navbar-nav li {
padding: 30px 0 0 100px;
}
.navbar-nav>li>a {
padding: 0 0 5px 0 !important;
color: #fff !important;
}
.navbar-nav a:hover,
.navbar-nav a:active {
border-bottom: 1px solid #333;
}
.navbar-brand {
transition: color 0.2s ease;
color: #fff!important;
font-size: 2em !important;
font-weight: 100 !important;
}
.navbar-brand:hover {
color: #ffb100 !important;
}
/*----HEADER----*/
#header {
text-align: center;
height: 100vh;
background-color: #333;
background-color: #333;
color: #fff;
padding-top: 15%;
}
#header h1 {
font-size: 2.8em;
font-weight: 100;
}
/*----ABOUT----*/
#about{
height:100vh;
background-color:#39bebe;
}
#portfolio{
height:100vh;
background-color:#009eee;
}
And here's the jQuery code:
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
var aboutOffset=$("#about").offset().top;
if(scroll<=aboutOffset){ // if I haven't reached #about section yet
$("#main-nav").removeClass("hidden-nav");
} else {
$("#main-nav").addClass("hidden-nav"); //hide the navbar
function hideIt(){
$("#menu-trigger").addClass("hidden-menu"); //hide the trigger
};
if (scroll > lastScrollTop){ //scrolling down
setTimeout(hideIt, 2000);
} else {
$("#menu-trigger").removeClass("hidden-menu");
}
lastScrollTop = scroll;
$("#menu-trigger, #main-nav").on("mouseover", function(){ //if I hover over the trigger or the navbar
$("#main-nav").removeClass("hidden-nav"); // I leave the navbar visible
});
$("#menu-trigger, #main-nav").on("mouseout", function(){ //if I move the cursor out of the trigger or the navbar
$("#main-nav").addClass("hidden-nav"); // hide the navbar
});
}
}); // END $(window).scroll();
}); //END $(document).ready();

You have a function that it does something when you do scroll.
$(window).scroll(function(event) {
...
}
And you have a conditional that when it's false, this sets somthing behaviors.
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
} else {
...
}
The behavior that it's doing to hide the navbar is this:
$("#menu-trigger, #main-nav").on("mouseout", function(){
$("#main-nav").addClass("hidden-nav");
});
You need to delete this behavior ;-)
UPDATE
Or, a better solution would be this:
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
$("#menu-trigger, #main-nav").off("mouseout");
} else {
...
}

Bootstrap3 Left Sidebar Right Toggle

I want to develop a web application with bootstrap.I have a left sidebar menu. I want that menu toggle from right while this page is opened from phone browser.
I want to create like this: https://formstone.it/
My example is here: https://jsfiddle.net/gd39damu/3/
html code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
</div>
</nav>
<div class="container">
</div>
<div class="sidebar">
<div class="navigation">
<ul>
<li>aa</li>
<li>bb </li>
<li>cc</li>
<li>dd</li>
</ul>
</div>
</div> <!-- // Sidebar -->
</body>
css code:
#import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
.sidebar {
background-color: #aaaaaa;
}
#media (min-width: 800px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
}
.navigation {
width: 240px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 5;
}
}
.navigation {
background: #455a64;
overflow-y: auto;
padding: 30px;
}
#media (max-width: 800px){
.sidebar {
display: none;
}
}

I have used jQuery toggle and CSS to achieve this You can check the full code here on pastebin

I recommend using another jQuery Plugin for that, to make the menu smoother: http://ascott1.github.io/bigSlide.js/
It's a lightweight lib with around 1kb size.

use jQuery toggle function with this
if ($(window).width() < 768){});

Use an off-canvas overlay menu for Bootstrap.
Example: http://codeply.com/go/zyKyFfeUcH

Bootstrap search box similar to Google Developers

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>

How to vertically stack navbar elements on collapse expansion

When I click on the navbar-collapse button, the elements from the navbar expand but they're not vertically aligned. How would you do this by keeping Link5 and Link6 right-aligned on the navbar?
Here's the JSFiddle: http://jsfiddle.net/sushiknives/yvgr92c3/1/
EDIT: nav-pills seems to be the issue. If I replace it with navbar-nav it automatically stacks vertically. In that case is there a way to recreate the nav-pills effect?

you can use flexbox property flex-direction : column to stack it vertical hope this will help you
body {
width: 100% margin: auto;
background-color: #f7f7f7;
}
.navbar {
background: #FFFFFF
}
.nav {
width: 100%
}
.nav a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: column;
}
.nav li {
display: inline;
}
.content {
margin-top: 100px;
}
<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="texthover_test.css">
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav nav-pills">
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="pull-right">Link5
</li>
<li class="pull-right">Link6
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Hope I understand your question. The li has to be full width of the parent element or you can shorten the width of the ul itself and make the li the same width as the ul. Adjust as needed.
.nav li{
display: block;
width: 100%;
}
See it stacked as you want