Enclosed is the code for the index.html I am using to build a personal website. I am experimenting with bootstrap and am not well versed in how it works. I have encountered a problem which after much research I have not been able to solve thus my posting it here. I am using a bootstrap navbar with links and dropdowns, the links work, but the dropdowns do not open when they are clicked on, they plain do not respond. what is strange is that they were working, but somehow I have done something and now they don't. Any guidance would be really helpful. What am I doing wrong?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ryan Pace Sloan</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('.dropdown-toggle').dropdown()
</script>
<style>
body{
background: #0000ff url('blue-texture-circle.jpg') no-repeat top left;
}
#name{
color: whitesmoke;
font-size: 65px;
margin-left: 25px;
}
#starImg{
color: gold; /*#ccddff;*/
font-size: 45px;
}
#imgDiv{
border-radius: 100%;
background-color: lightblue;
height: 300px;
width: 350px;
margin-top: 77px;
margin-left: 777px;
border: 2px solid cadetblue;
}
#imgDiv img {
border-radius: 100%;
height: 280px;
width: 330px;
margin: 7px 7px 10px 10px;
padding: 0px;
}
#goldA{
color: gold;
margin-top: 70px;
margin-left: 555px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<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">
<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="#"><strong id="starImg">*</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse bs-example-js-navbar-collapse" id="collapseNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="https://github.com/ryanpsloan" target="_blank">>
GitHub<span class="sr-only">(current)</span></a></li>
<li><a href="https://www.linkedin.com/profile/view?id=85723107&trk=spm_pic" target="_blank">>
LinkedIn</a></li>
<li>>Resume</li>
<li>>Location</li>
<li>>WebGL ★</li>
<li class="dropdown">
<a id="portfolio" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Web Dev Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="portfolio">
<li role="presentation"><a role="menuitem" tabindex ="-1"
href="http://www.easyconversiontools.com">Easy Conversion
Tools</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem"
tabindex="-1" href="http://www.unitydictionary.info">Unity
Turkish English Dictionary</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.przm-air.com">PRZM
Air</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>>Contact</li>
<li class="dropdown">
<a id="tweetDrop" href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" role="button"
aria-expanded="false">Tweets #ryanpacesloan <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tweetDrop">
<li role="presentation"><a role="menuitem" tabindex="-1" class="twitter-timeline"
href="https://twitter.com/ryanpacesloan"
data-widget-id="536299887302701056"></a>
<script>
!function(d,s,id){
var js,
fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1 id="name">Ryan Pace Sloan</h1>
</header>
<div id="centerDiv">
<div id="imgDiv">
<img src="ryanpace.jpg">
</div>
</div>
<footer>
<div id="goldA">
© Gold Asterisk 2014
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Please be sure to point jquery js file. Because, bootstrap needs jquery. Add this before bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
Dropdown on my website doesn't open on mobile devices. I've followed many tips and tricks posted on the web but still unable to find a workaround!
This is my html:
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="dropdown" data-dropdown="dropdown" >
<button style="padding: 0 8px 10px 8px; font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt" data-toggle="collapse" >About</button>
<ul class="dropdown-menu" style="padding: 0 8px 10px 8px; width: 15px;font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt">
<li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#who">About Us</a></li>
<li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#team">Team</a></li>
<li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.faq') }}">FAQ</a></li>
<li><a style="color:#fff" tabindex="-1" href="https://www.youtube.com/watch?v=OZLNAHYpL14">Demo</a></li>
</ul>
</li>
</ul>
</nav>
CSS imports:
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
JS:
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>
Add Jquery to your script section.. bootstrap required to work well..
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
I need a menu, html+jquery where it must show all the menu in normal mode, when i go to responsive more only some menu must be visible and other menu must be under more where it must be generated automatically similar to this link
https://www.amazon.com/stores/Ozeri/node/2598028011
Suppose if zoom in or zoom out of browser I need to add some menu automatically to that more option generated.
PS: [If link does not work please copy paste it]
Check My source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ozeri :: Ozeri Pro II Digital Kitchen Scale with Removable Glass Platform and Countdown Kitchen Timer (1 g to 12 lbs Capacity) </title>
<link rel="icon" type="image/ico" href="img/favicon.png" />
<!-- web-fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700" rel="stylesheet" type="text/css">
<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Style CSS -->
<link href="css/ozeri-style.css" rel="stylesheet">
<link href="css/quick-view-img.css" rel="stylesheet">
<!-- slider -->
<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="css/thumbnail-slider.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.popup-big-img { width: auto; height: 500px; text-align: center}
.popup-big-img img{ width: auto; height: 100%; }
.popup-small-img{width: 50px;height: 50px; margin:5px;float: left; border: 2px solid #ccc;}
.popup-small-img img{ width: 100%; height: 100%}
.modal-dialog.pro-popup{ width: 95%}
.popup-small-img:hover{border: 2px solid #004b91; cursor: pointer}
.popup-small-img-test{border: 2px solid #ff8f00;}
.modal-header.no-border{ border: none;}
h4.modal-title{ color: #000; font-size: 16px; font-weight: 400; margin: 10px 5px}
.a-row {margin-left: 0px; margin-top: 0px;margin-right: 10px;float: left; }
.color-select{float: left; width: 70%}
.a-form-label {font-weight: 700;}
.manufacturer img{ text-align: center; display: inline-table;}
.product-color{ width: 100%;}
</style>
</head>
<body>
<div class="container-inner">
<nav class="navbar m-menu navbar-default">
<div class="container-fluid container-inner">
<div class="search-input hidden-mobile" style="display: none">
<input class="form-control top-search-box" placeholder="Search" aria-label="Search" type="text">
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!--<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="#navbar-collapse-1">
<ul class="nav navbar-nav navbar-left main-nav">
<li>Barware</li>
<li class="dropdown dropdown-toggle"><a href="category.html" data-toggle="dropdown" title="Glassware">Glassware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Moderna Artisan Glassware</li>
<li>Serafina Artisan Glassware</li>
<li>Curva Artisan Glassware</li>
</ul>
</li>
<li>Kitchen Scales</li>
<li>Kitchen Accessories</li>
<li class="dropdown dropdown-toggle">
<a href="category.html" data-toggle="dropdown" title="Cookware">Cookware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Ceramic Earth Series</li>
<li>Stone Earth Series</li>
<li>Stainless Steel Series</li>
<li>Professional Series</li>
</ul>
</li>
<li>Oscillatting Fans</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-right">
<li>Bath and Personal Care</li>
<li>Novelty</li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
</nav>
</div>
</body>
</html>
try to
$(document).ready(function(){
var item_width = $('#menu_ul li').width();
var item_count = ($( "#menu_ul li" ).length);
var nav_width_og = $('.menu').width();
var nav_width = $('.menu').width();
if ((item_width*(item_count+1)) > nav_width ){
$('#more').appendTo('body');
$('#more').hide();
}
for(var i = 0; i < item_count; i++) {
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
}
$(window).resize(function(){
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
if (nav_width>(item_width*item_count)+(item_width-1)){
$('.overflow li').last().appendTo($('#menu_ul'));
$('#more').appendTo($('#menu_ul'));
}
if (nav_width == nav_width_og ){
$('#more').appendTo('body');
$('#more').hide();
}
});
$('#more').click(function(){
$('.overflow').slideToggle();
});
});
.menu{
position:relative;
max-width:600px;
margin:0 auto;
background:red;
font-size:0px;
}
ul{
list-style:none;
padding:0;
}
li{
display:inline-block;
background:green;
font-size:16px;
width:100px;
text-align:center;
}
.overflow{
position:absolute;
right:0;
display:none;
}
.overflow li{
display:block;
background:yellow;
}
#more{
background:blue;
display:none;
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul id="menu_ul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li id="more">more</li>
</ul>
<ul class="overflow">
</ul>
</div>
As like in your given amazon link, it has a menu named 'MORE'. 'MORE' has sub-menu 'Novelty' while in large screen/desktop.
If it goes in smaller screen like for mobile/tab screen sizes, if we click on 'MORE', a modal menu bar comes.
I think, you want like this.
To do this, you will need JS/jQuery.
Step 1: for large screen/desktop sizes, just CSS dropdown menu is OK. Just have that 'MORE' with sub-menu using ul/li, you might be using bootstarp.
Step 2: You can have a hidden div with a modal(bootstarp modal or any other modal) having menu items inside and a 'close' button to close the modal. On clcik 'MORE' link, just call the modal by JS.
You need to check smaller screen sizes by JS. Bootstap modal has both HTML tag attribute way or some methods to call and close.
bootstrap 4 modal doc: https://getbootstrap.com/docs/4.0/components/modal/
You can style that modal by CSS as you need. There are many jQuery modal plugin or can use bootstrap modal.
As you have asked for any dropdown for item2 and others.
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Barware</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Glassware</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Scales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Accessories</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
cookware<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Osciallating Fans</a>
</li>
</ul>
</nav>
<br>
</div>
</body>
</html>
https://jsfiddle.net/sugandhnikhil/kdbnq2tx/
I'm currently trying to create a test site just to practice, and for one my background image will not center/ and keeps repeating whenever I try to make it responsive. Also the whole image is not present within the browser. Any solution would be helpful.
I tried
background-size: cover;
background-position: center;
and it's still not working.
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
}
.navbar {
background-color: transparent;
border: 0px;
}
.jumbotron {
color: #C7DB8A;
background-color: transparent;
text-align-last: center;
padding-top: 15%;
}
.jumbotron p {
color: #5E9589;
}
<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>
<head>
<title>asdfs Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
</head>
<body>
<!--nav-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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="#">ABXCH</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">
<i class="fas fas fa-home"></i>
Home
</a></li>
<li><a href="#">
<i class="far fa-question-circle"></i>
About
</a></li>
<li><a href="#">
<i class="far fa-handshake"></i>
Contact
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<i class="fas fa-sign-in-alt"></i>
Login
</a></li>
</ul>
</div>
</div>
</nav>
<!--jumbo-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>asdfas</h1>
<p>Your Online Insurance Sales Office</p>
<hr>
<p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
The issue is not with background-repeat but you are facing a background propagation. As you can see in the below screenshoot, your body element is not taking full height of the screen and there is some special rules with background when we have such situation:
As you can read in the specification:
For documents whose root element is an HTML HTML element or an XHTML
html element [HTML]: if the computed value of background-image on the
root element is none and its background-color is transparent, user
agents must instead propagate the computed values of the background
properties from that element’s first HTML BODY or XHTML body child
element. The used values of that BODY element’s background properties
are their initial values, and the propagated values are treated as if
they were specified on the root element. It is recommended that
authors of HTML documents specify the canvas background for the BODY
element rather than the HTML element.
This means that the background is propagated to cover the area not covered by the body and thus you have the reapeted background. To avoid such behavior you can insure that the body takes full screen height by adding min-height:100vh or apply a background-color to the html element and keep the image to cover only the content part:
html {
background:white;
}
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
}
.navbar {
background-color: transparent;
border: 0px;
}
.jumbotron {
color: #C7DB8A;
background-color: transparent;
text-align-last: center;
padding-top: 15%;
}
.jumbotron p {
color: #5E9589;
}
<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>
<head>
<title>asdfs Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
</head>
<body>
<!--nav-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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="#">ABXCH</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">
<i class="fas fas fa-home"></i>
Home
</a></li>
<li><a href="#">
<i class="far fa-question-circle"></i>
About
</a></li>
<li><a href="#">
<i class="far fa-handshake"></i>
Contact
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<i class="fas fa-sign-in-alt"></i>
Login
</a></li>
</ul>
</div>
</div>
</nav>
<!--jumbo-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>asdfas</h1>
<p>Your Online Insurance Sales Office</p>
<hr>
<p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
Some related links for more informations:
What's the meaning of "propagated to the viewport" in the CSS spec?
Applying a background to <html> and/or <body>
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
Because you not set the background-repeat:no-repeat; try following code:
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
background-repeat:no-repeat; // Added
min-height:100vh; // Added for ensure capture window size
}
Just put background-repeat: no-repeat and background-size: cover . It will work
background-image: url(http://placehold.it/800x300);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
I have the following JSFiddle code
https://jsfiddle.net/mwcf086c/
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
[Using Bootstrap and in mobile mode]
I would like that when the menu be expanded, it cover all the page.
See the following image.
Any idea on how to achieve this?
Thanks
Add height: 100vh !important; to your css in the .navbar-collapse.in, .navbar-collapse.collapsing class
.navbar-collapse.in, .navbar-collapse.collapsing {
clear: left;
}
.navbar-collapse.in {
height: 100vh !important;
}
Here is a fiddle: https://jsfiddle.net/L2fqzswk/1/
I don't know what I'm doing wrong here but I expect it's something woefully stupid.
I'm using Bootstrap 3 in Umbraco 6.0.5 and I cannot get the toggle to work on resize down - below 770px width the nav collapses but there's no button to toggle it with, or rather something is there, as seen in code and Firebug, but not visible, in Chrome and Firefox (haven't tried IE).
There's a fiddle and the code below. I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js and http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css in the fiddle.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<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"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class=" dropdown">
What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>Key reech projects</li>
<li class=" dropdown">
</li>
<li>Technologies</li>
<li class=" dropdown">
</li>
<li>Complementary Activities</li>
<li class=" dropdown">
News <b class="caret"></b>
<ul class="dropdown-menu">
<li>Merseyside collective switching scheme launched</li>
<li>reech scoops top award</li>
<li>reech award nomination</li>
<li>Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</li>
<li>Energy Switching Scheme</li>
<li>Project 'reeches' new milestone</li>
<li>Firms sign up for new opportunities</li>
<li>14 new jobs created for Merseyside residents</li>
<li>'reeching' out to Low Carbon and Green Energy Sector</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>reech into business</li>
<li class=" dropdown">
reech partners <b class="caret"></b>
<ul class="dropdown-menu">
<li>reech Steering Group</li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
Update - so, I tried altering the data-target (and have altered the fiddle) to #main-nav and the id to main-nav, no joy.
The I tried putting a dash character in the button > span element, and it works. That is, the dashes display, and I can toggle the menu. But where are the icon bars?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
And change <nav class="navbar"> to <nav class="navbar navbar-default">
Bootstrap - the toggle button will not show in mobile view
FIX:
Make these changes at: bootstrap.min.css
This fixes the outer border of the Toggle Button
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
Add
border:1px solid #444;
(change color code to match your design)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
This fixes the horizontal lines of the Toggle Button
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
Add
border:1px solid #444;
(change color code to match your design)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
In your 1st line
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
it should be data-target="#nav-collapse" because you have <div class="collapse navbar-collapse" id="nav-collapse"> where id is nav-collapse
This should get you pointed in the correct direction. It looks like your main hiccup is your button data-target attribute is referencing a class rather than an ID. It's best to use an ID in this situation so if you call that class elsewhere in the code your not throwing curve balls at the javascript.
I also see you have several <li class="dropdown"></li> that are blank. I'm not sure if this is intentional or not, but I would refer to the structure that I've enclosed.
Hope this works for you, and best of luck!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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"> <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="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
<li>Complementary Activities</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>