Navibar and full page slider - javascript

I just wanted to place my bootstrap nav bar inside the full width slider just like this.
This is the full width slider
http://codepen.io/grovesdm/pen/MazqzQ
I've placed the nav bar on top and put slider code after that. Now it's looks like this.
If I remove the nav bar background color and make that div transparent, nothing happened. If I need to place the slider inside the slider?

I think you want this :
/*! http://mths.be/slideshow v1.0.0 by #mathias */ ;
(function($) {
$.fn.slideshow = function(options) {
options = $.extend({
'timeout': 3000,
'speed': 400 // 'normal'
}, options);
// We loop through the selected elements, in case the slideshow was called on more than one element e.g. `$('.foo, .bar').slideShow();`
return this.each(function() {
// Inside the setInterval() block, `this` references the window object instead of the slideshow container element, so we store it inside a var
var $elem = $(this);
$elem.children().eq(0).appendTo($elem).show();
// Iterate through the slides
setInterval(function() {
$elem.children().eq(0)
// Hide the current slide and append it to the end of the image stack
.hide().appendTo($elem) // As of jQuery 1.3.2, .appendTo() returns the inserted element
// Fade in the next slide
.fadeIn(options.speed)
}, options.timeout);
});
};
}(jQuery));
// Name the slider
$(function() {
$('.slider').slideshow({
timeout: 7000,
speed: 1000
});
});
* {
padding: 0;
margin: 0;
}
/*section {
border: 10px solid green;
}
body {
border: 10px solid orange;
}*/
.slider {
position: relative;
width: 100%;
height: 100vh;
}
.slider li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
list-style: none;
}
.slider li .slide {
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
.slider li .slide figcaption {
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
color: white;
text-shadow: 0 0 5px black;
font-size: 60px;
text-align: center;
position: absolute;
top: -30px;
margin-top: 50vh;
left: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<section>
<nav class="navbar 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 id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<ul class="slider">
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/1d9326c2ae66befef4e39c3426adf17a.jpg)">
<figcaption>hello</figcaption>
</figure>
</li>
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/______by_Thoum.jpg)">
<figcaption>yeah</figcaption>
</figure>
</li>
</li>
</ul>
</section>
<p>Hello</p>
</body>

Related

How to move nav-link to the right in bootstrap4?

I would like to ask how to move nav-link to the right? becuase I try it like float: right or margin left:auto,it will lead hamburger menu to the middle. I want the hamburger menu and navlink all to right side. Besides, when I minimize my screen smaller, the hamburger menu and navlink are fine they are in right side, just when I minimize my screen bigger, the nav-link is at the left side. Also, when I minimize the screen smaller, I click the dropdown menu, the navbar become bigger and the dropdown menu is inside the navbar which lead the navbar bigger. I want the dropdownmenu outside the navbar. I try to use position: fixed, position :relative and position absolute, it doesn't fix it. Therefore, I would like to ask is there any solutions about. So, I can fix it. Thank you.
This my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav " >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
To fix the user icon always to the right, I added this css:
a.nav-link.dropdown-toggle{
text-align: right;
}
Then on large screen to keep your ul always to the right I add BS4 class ml-lg-auto that will add margin au to the left for screen over lg break points.
For having hambuger align right add class ml-left to your button.
If you want to have the same effect of your dropdown in small and large screen I added css as follow:
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
a.nav-link.dropdown-toggle{
text-align: right;
}
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav ml-lg-auto" >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu user-dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

show/hide buttons on resizable navbar

I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.
I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.
Here is my attempt
$(window).resize(function() {
var navbar = $("#navbar");
var list = $("#list");
var btns = $("#btns");
var last_element;
for (var i = 0; i < list.children().length; i++) {
setTimeout(function() {
if (list.height() > 80) {
last_element = list.children().last();
setTimeout(function() {
$("#btns .dropdown-menu").prepend(last_element);
}, 300);
last_element.remove();
}
}, 500);
}
});
#navbar {
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
}
#list {
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.item {
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
/* display: inline-block; */
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
}
.dropdown-menu {
width: 200px;
padding: 0 20px;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
<li class="item">item 5</li>
<li class="item">item 6</li>
<li class="item">item 7</li>
</ul>
<div id="btns">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I would love to have similar action to this image,
Can someone offer a snippet suggestion or what should I use to implement such action?
Updated - move hidden items to dropdown menu
First, make changes on css:
apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.
`
#navbar{
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
/*Flex layout*/
display:flex;
flex-direction:row;
align-items:center;
}
#list{
margin: 0;
padding: 0;
/*Calculate the max-height and set overflow hidden*/
overflow:hidden;
max-height:73px;
}
.item{
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
/*Move text-align center to here*/
text-align: center;
/*Remove flex layout & add display inline-block*/
display: inline-block;
}
.dropdown-menu{
width: 200px;
padding: 0 20px;
}
`
Then, update the $(window).resize() function.
The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.
let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");
$(window).resize(function() {
let listPosition = list.position().top;
let hiddenItems = listItems.filter(function(){
return $(this).position().top - listPosition > 0;
}).clone();
dropdownMenu.html(hiddenItems);
});
I see you're using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Make the background image of class to be slideshow

I have class that have background image and this background image have fixed navbar and some text on it. How can I make this background image to be slideshow with another two images. Can someone help me with this without damaging the fixed navbar and the text on it?
Here is my codes
<div id="home" class="intro route bg-image" >
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="overlay-itro"></div>
<div class="intro-content display-table">
<div class="table-cell">
<div class="container">
<h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1>
<p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p>
<!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
</div>
</div>
</div>
</div>
css file
.intro {
height: 100vh;
position: relative;
color: #fff;
background-image: url(asset-path("attachment_1550437745.png"));
}
.intro .intro-content {
text-align: center;
position: absolute;
}
I have created a very raw, pure CSS solution, as good starting point for you. Using different animations and delays you could achieve some really awesome effects.
body {
margin: 0;
padding: 0;
}
.route {
height: 100vh;
position: relative;
color: #fff;
}
.navbar {
position: fixed;
}
.slide {
position: relative;
height: 100%;
width: 33.33%;
margin: 0;
float: left;
}
.slide-1 {
background-image: url(https://picsum.photos/1200/800?image=11);
}
.slide-2 {
background-image: url(https://picsum.photos/1200/800?image=12);
}
.slide-3 {
background-image: url(https://picsum.photos/1200/800?image=13);
}
.slideshow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
color: #000;
}
.slideshow-inner {
position: relative;
height: 100%;
width: 300%;
animation: move 20s ease infinite;
}
.intro .intro-content {
text-align: center;
position: absolute;
}
#keyframes move {
0% {
transform: translate(0, 0);
}
33.33% {
transform: translate(-33.33%, 0);
}
66.66% {
transform: translate(-66.66%, 0);
}
}
<div id="home" class="route bg-image">
<div class="slideshow">
<div class="slideshow-inner">
<div class="slide slide-1"><span>Some Text</span></div>
<div class="slide slide-2"><span>Some Text</span></div>
<div class="slide slide-3"><span>Some Text</span></div>
</div>
</div>
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Presumably you mean a time-based slideshow rather than one where the user presses buttons. The various options are all typically handled with JavaScript. As your background element has children, I would extend your existing code by adding new classes corresponding to new background images, and switching between them.
.bg1 {
background-image: url(asset-path("img1.png"));
}
.bg2 {
background-image: url(asset-path("img2.png"));
}
.bg3 {
background-image: url(asset-path("img3.png"));
}
Then add the first class to your background element:
<div id="home" class="intro route bg-image bg1" >
and include JS code to cycle through the classes, like below - included as part of a snippet so you can see the effect.
function updateSlide() {
const bgCount = 3; //This needs to match the number of background classes - main weakness of this snippet
const bgElem = document.getElementById('home'); // Background element
let foundClasses = []; //List of background classes found
let bgIndex = 0;
for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes
const thisClass = bgElem.classList.item(classIndex);
if(thisClass.substr(0, 2) == 'bg') {
foundClasses += thisClass;
bgIndex = parseInt(thisClass.substr(2)) + 1;
}
}
if(bgIndex > bgCount) {
bgIndex = 1;
}
bgElem.classList.add('bg' + bgIndex); //Apply the new class
bgElem.classList.remove(foundClasses); //Remove all previous background classes
}
setInterval(updateSlide, 2000); // Change every 2 seconds
#home {
display: block;
}
.bg1 {
background: red;
}
.bg2 {
background: yellow;
}
.bg3 {
background: green;
}
<div id="home" class="bg1">Test</div>
Long-term, you would want the cycling script to get its background-count from a Rails variable or the HTML instead of a hard-coded value.

Bootstrap Navbar links overlap when resizing the browser

I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<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>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<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>
</ul>
</div>
</div>
</nav>
This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

Aligning navigation elements with logo - Bootstrap 3

I'm using Bootstrap 3 to construct a responsive menu like so:
Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)
The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)
Desktop view:
Mobile view:
My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle
<div class='jumbotron grey-bg'>
<div class='container-fluid'>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
<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="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav-bar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class='active'><a href='#'>Link 2</a></li>
<li>Link 3</li>
<li><a href='#'>Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div><!--- end jumbotron -->
/* logo */
.navbar-brand {
width: 440px;
height: 140px;
background: url(img/logo.jpg) no-repeat;
text-indent: -999px;
padding: 0px;
margin: 0px;
}
/* end */
/* navigation */
.navbar-default {
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
color: #666;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover {
text-decoration: underline;
color: #666;
}
/* end */
img {
display: block;
height: auto;
max-width: 100%;
}
If you want the image to be responsive, don't make it a background image (include in html) and add the class "img-responsive":
<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>

Categories