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>
Related
I've got a problem with my Bootstrap 5.0.2 navbar both desktop and mobile when collapsed.
The point is to collapse after click on links.
Hrefs/links dont't work.
Can u guys tell me where I messed up?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="icon" type="image/png" href="img/favico.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style> .navbar {
background-color: black;
}
#home {
height: 30vh;
background-color: yellow;
}
#about {
height: 30vh;
background-color: red;
}
#my-skills {
height: 30vh;
background-color: green;
}
#work {
height: 30vh;
background-color: purple;
}
#work {
height: 30vh;
background-color: blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- nav -->
<nav id="wrap" class="navbar navbar-expand-lg navbar-dark menu fixed-top gradient-nav">
<div class="container">
<div class="row align-items-start">
<div class="col-2">
<a class="navbar-brand " href="#home">
<img src="img/logo.png" alt="logo">
</a>
</div>
</div>
<div class="row align-items-center">
<div class="collapse navbar-collapse col-8" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">About</a></li>
<li class="nav-item"><a class="nav-link" href="#my-skills" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">My Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Contact</a></li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="collapse navbar-collapse col-2" id="navbarSupportedContent">
<ul class="navbar-nav text-center">
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-facebook"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-git-alt"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<section id="home"></section>
<section id="about"></section>
<section id="my-skills"></section>
<section id="work"></section>
<section id="contact"></section>
<script src="https://kit.fontawesome.com/ccbb5f75d7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
</body>
</html>
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/
How to have facebook navigation like alignments in Bootstrap?
Run the code in full page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<ul class="navbar-nav">
<li class="nav-item"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></li>
<li class="nav-item"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></li>
</ul>
</nav>
As facebook navigation icons have equal space between each other, how can I acheive it in my navigation?
Note: If the screen gets bigger/shorter it should auto adjust them self.
You can use flexbox to evenly space each nav item:
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<ul class="navbar-nav">
<li class="nav-item"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></li>
<li class="nav-item"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></li>
</ul>
</nav>
Simpler than I thought with no need to redefine the BS4 CSS. I modified the navbar to use bs4 markup without the ul and li...seems cleaner this way
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<div class="navbar-nav w-100 nav-justified">
<a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a>
<a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a>
</div>
</nav>
You can do something like this:
.navbar-nav {
display: flex;
}
.nav-item {
flex: 1;
text-align: center;
margin: 5px;
}
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;
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>