I want the navbar to stay on the same row, I believe the flex layout is stacking the columns and giving them 100% width. This means I end up with the icons and website name all stacked instead of on the left, center, and right. Is there a simple solution here I'm missing? Not really familiar with flex.
JSFiddle link because I had trouble getting the bootstreap css working in the Stack Overflow snippet
HTML:
<!doctype html>
<html lang="en" class="h-100">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="d-flex h-100 text-center text-white">
<div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto" id="nav">
<div class="row justify-content-between">
<div class="col-xs-4 col-sm-4 mt-4">
<a class="nav-link first-icon ms-3" href="#">
<i class="fa fa-car"></i>
</a>
</div>
<div class="col-xs-4 col-sm-4 brand-logo">
<h3 class="justify-content-center mt-3 fw-bold">Website Name</h3>
</div>
<div class="col-xs-4 col-sm-4">
<nav class="nav nav-masthead float-end mt-4 me-3">
<a class="nav-link">
<i class="fa fa-car"></i>
</a>
<a class="nav-link" href="#">
<i class="fa fa-car"></i>
</a>
<a class="nav-link" href="#">
<i class="fa fa-car"></i>
</a>
</nav>
</div>
</div>
</header>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
body {
background-color: #000000;
}
#nav {
height: 4rem;
border-bottom: 1px solid #3a3a3c;
}
.icon {
height: 30px;
width: 30px;
cursor: pointer;
}
.stats-icon {
height: 27.5px !important;
width: 27.5px !important;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #fff;
background-color: transparent;
border-bottom: .10rem solid transparent;
cursor: pointer;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
#media screen and (max-width: 768px) {
.first-icon {
float: left;
}
}
Related
I'm new to the laravel environment. I've been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.
Here are my files:
Layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
<!--Bootstrap, Jquery, Pooper, FontAwesome-->
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
<script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
<!--/Bootstrap, Jquery, Pooper, FontAwesome-->
<style>
.dropdown-toggle::after {
content: none;
}
</style>
</head>
<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
#include('shared.navbar')
#include('shared.sidebar')
</header>
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
#yield('content')
</main>
<!--/.Content-->
<!--Scripts-->
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
</script>
<!--/.Scripts-->
#include('shared.modal-crear')
#include('shared.modal-editar')
<!--Plugins-->
<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
<!--/.Plugins-->
</body>
</html>
navbar.blade.php
<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
<!-- SideNav slide-out button -->
<div class="float-left pl-2">
<a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
<i class="fa fa-bars" aria-hidden="true"></i></button></a>
</div>
</hr>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto px-4">
<a href="/">
<strong id="nav-title">Dimiforms</strong>
</a>
</div>
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item dropdown">
<a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-haspopup="true" aria-expanded="false">
#yield('User-name', 'Default') | Usuario
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Mi cuenta</a>
<a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
Sidebar.blade.php
<div class="sidebar float-left" id="sidebar">
×
<div class="text-center">
<img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
<h6>#yield('User-name')</h6>
</div>
<hr>
<div class="items-container">
<a href="cuenta" >
<h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i> | Cuenta</h6>
</a>
<a href="formularios">
<h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i> | Formularios</h6>
</a>
<a href="estadisticas">
<h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i> | Estadisticas</h6>
</a>
<a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
<h6 class="menu-item"><i class="fas fa-laptop-code"></i> | Dimiforms</h6>
<div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
</div>
</div>
</a>
<hr>
<a href="about">
<h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i> | Acerca de</h6>
</a>
</div>
styles.css
/*general stuff*/
a {
text-decoration: none !important;
}
/*sidebar*/
#sidebar {
height: 100%;
width: 0;
z-index: -inherit;
position: fixed;
left: 0;
background-color: #2c3e50;
padding: 60px 0 0 0;
top: 55px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 1s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar h6 {
color: rgb(255, 255, 255);
margin-top: 7px;
}
.sidebar a{
padding: 4px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.8s;
background-color: inherit !important;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: #c36618 !important;
}
.items-container{
text-decoration: none;
color: white;
}
.menu-item, .dropdown-item{
padding: 6px 0 10px 20px;
transition: 0.8s;
cursor: pointer;
}
.menu-item:hover{
background-color: white;
color:#2c3e50;
}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50px 50px 50px 50px;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
/*sidebar*/
/*navbar*/
#navbar {
background-color: #c36618;
border: none !important;
height: 60px;
}
#sidebarCollapse{
background-color: transparent;
color: #fafafa;
}
#sidebarCollapse:hover {
background-color: white;
color: #c36618;
}
#nav-title, #nav-dropdown{
color: #ffffff;
}
/*main*/
main{
padding: 0 0 0 25%;
transition: margin-left 1s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/* Dropdowns */
.dropdown-item{
display: block;
transition: 0.8s;
color: #2c3e50 !important;
background-color: transparent !important;
}
.dropdown-item:hover{
color:#c36618 !important;
}
.dropdown{
width: inherit;
background-color: inherit !important;
border: 0px;
}
/* Modals */
.submit-button{
background-color: #2c3e50;
color:white;
border-radius: 8px;
}
I fixed it by changing the order of the bootstrap, Jquery and main css files.
I had two bootstrap files imported as well.
body{
background:url(background.jpg);
background-size: cover;
}
h1{
font-family: 'Dancing Script', cursive;
font-size: 5em;
color: white;
text-align: center;
margin-top: 25px;
margin-bottom: 20px;
}
h2{
font-size: 18px;
color: white;
text-align: center;
font-family: 'Tajawal', sans-serif;*/
}
hr{
border-color: white;
margin-left: 200px;
margin-right: 200px;
}
img{
float: center;
width: 20%;
height: 20%;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
li{
display: inline;
text-align: center;
font-family: 'Tajawal', sans-serif;
}
.btn-group{
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 50px;
}
.btn-group button {
align-items: center;
background-color: rgba(135, 138, 138, 0.1);
border: none;
color: white; /* White text */
padding: 10px 24px; /* Some padding */*/
cursor: pointer; /* Pointer/hand icon */
float: /* Float the buttons side by side */
box-shadow: 1px;
margin: 0 auto;
}
.btn-group button:not(:last-child) {
border-right: none; Prevent double borders
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(49,52,56);
border: 1.5px solid rgb(49,52,56);
}
.btn-group button:focus {
background-color: rgb(49,52,56);
outline: rgb(49,52,56);
border-color: rgb(49,52,56);
border: 1px solid rgb(49,52,56);
}
.btn-group a{
color: white;
}
.btn-group a:hover {
text-decoration: none;
}
/**/
/* Style the tab */
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<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">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
</head>
<body>
<!-- -->
<div class="heading">
<h1>Portfolio</h1>
</div>
<div class="btn-group">
<div class="tab"><button class="tablinks" onclick="openMenu(event, 'home')"> Home</button></div>
<div class="tab"><button class="tablinks2" onclick="openMenu(event, 'portfolio')">Portfolio</button></div>
</div>
<div id="home" class="tablinks">
<h2>My name is I am a Front End Web developer from . I have a passion for UX/UI and I m currently seeking employment around the country. I am willing to work remote as well as relocate. Take a look at my work and contact me via the info below to learn more.
<br>
<img src="treeshot.gif">
<p>
<li>HTML5 * </li>
<LI>CSS3 * </LI>
<li>JavaScript * </li>
<li>React * </li>
<li>Wordpress * </li>
<li>UX/UI * </li>
<li>Sketch * </li>
<li>Adobe Suite * </li>
<li>Passion and drive to continue learning</li>
</p>
<br>
<hr>
</h2>
</h2>
</div>
<div id="Projects" class="tablinks2">
Projects
</div>
<script type="text/javascript" src="script.js"></script>
</body>
So far I have made two square buttons into a horizontal bar below my header. I have hyperlinks added to the buttons, but I want to make them tabs so the header does not move and you can cleanly scroll between the two pages with no load time. I will post html and css. Thank you for the help. I have tried using js and css but neither seem to make what it do what I want
As i can see you're using bootstrap 4. So the best way to do what you want is using nav tabs. Check bootstrap documentation. Here is the example:
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>
Bootstrap docs
I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>
I'm trying to develop my first website with bootstrap, so I'm quite new to it.
I used the inverse navbar and I noticed that when I get my browser's window smaller the right side of the navbar compiles on a dropdown menu that isn't working. It doesn't drop down the menu.
This is how the window is normally
This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.
Here's my HTML:
body {
margin: 0;
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
height:450px;
color:white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
</body>
</html>
Use in head section in given order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body {
margin: 0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
height: 450px;
color: white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
I am using Bootstrap 4.
How would I display a search input once the sticky nav locks in-place and remove it when it is not locked in place? I want it to be displayed on the right-hand side of the nave.
I figure this would need to be done with Jquery but I am not a frontend guy so this way above my design capabilities.
Take a look at the site it's up at www.pricereference.com.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
}
img {
max-width: 100%;
}
.btn {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-success {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-price-reference {
background-color: #3cc390;
border-color: #3cc390;
color: white;
}
.top-header {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: lightgrey;
}
.search-box {
padding-top: .3rem;
}
.navbar {
background-color: #0064b2;
margin-bottom: .5rem;
}
.nav-item a {
color: white;
font-family: 'Asul', sans-serif;
font-size: 1.2rem;
}
/* Home Page */
.list-group-item:first-child {
border-top-right-radius: 0rem;
border-top-left-radius: 0rem;
background-color: #3acfef;
color: white;
}
.list-group-item:first-child h1 {
color: white;
font-size: 2rem;
font-family: 'Kavoon', cursive;
}
.list-group-item {
font-family: 'Asul', sans-serif;
}
.list-group-item-action:focus,
.list-group-item-action:hover {
background-color: #D84728;
color: white;
}
.img-fluid {
max-height: 320px;
}
.carousel-caption h3 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-caption h4 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-indicators li {
background-color: #D84728;
}
.best-sellers {
padding-top: 1.2rem;
}
.best-sellers h2 {
color: #3cc390;
font-family: 'Kavoon', cursive;
}
.popular-products {
padding-bottom: 1.2rem;
}
.product-title {
color: #8F8F8E;
font-family: 'Asul', sans-serif;
}
/*bottom */
.bottom_space {
margin-bottom: 1em;
}
.detail-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
.social-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
/* footer */
footer {
background-color: #8F8F8E;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
bottom: 0;
}
.footerleft {
margin-top: 50px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #D84728;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{% block description %}{% endblock %}">
<meta name="keywords" content="{% block keywords %}{% endblock %}" />
<meta name="google-site-verification" content="qgjJmLV5Fd901rWTMqI3oL119zWfarqGqkfPjvnwATk" />
<meta name="msvalidate.01" content="1960AF70A1C1582C7B84ECFF511B758A" />
<link href="https://fonts.googleapis.com/css?family=Kavoon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asul" rel="stylesheet">
<script src="https://use.fontawesome.com/9bb4a99f3b.js"></script>
<link rel="icon" href="../../favicon.ico">
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static " css/bootstrap.min.css " %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static " css/starter-template.css " %}" rel="stylesheet">
</head>
<body>
<header class="top-header">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://stackedservers.com/cdn/PRICE_REFERENCE.png">
</div>
<div class="col-md-6 text-center search-box">
<form method='GET' action='{% url "home" %}' class="form-inline my-2 my-lg-0">
<div class="input-group input-group-lg">
<input class="form-control form-control-lg" type="text" placeholder="Search" type='text' name='q' placeholder='Search For Products' value='{{ request.GET.q }}' />
<button class="btn" type="submit">Search</button>
</div>
</form>
</div>
</div>
</header>
<nav class="navbar sticky-top navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url " home " %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:best_sellers " %}">Best Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:products_all " %}">All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:all_categories " %}">All Categories</a>
</li>
</ul>
</div>
</nav>
Here is example code of how you can achieve similar feature to reference website.
$(document).ready(function () {
var $menu = $('#navbar-main');
var menuOffsetY = $menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= menuOffsetY) {
$menu.addClass('fixed-top');
} else {
$menu.removeClass('fixed-top');
}
}
document.onscroll = scroll;
});
body{
min-height: 2000px;
}
<!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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="col-8">
<form class="form-inline">
<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>
</div>
</div>
</nav>
<nav id="navbar-main" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello World</h1>
<footer id="footer" class="footer">
<p class="text-center"><br>This is my big footer, only test. :)</p>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
You can check the output in full screen here https://output.jsbin.com/goqaded