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;
Related
I am trying to make a webpage using Bootstrap. I am using .container-lg so that the content get 100% width when max-width is 767px. But is it not getting 100% width on screens with width less than 768px.
My Code:
<!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>Module 09 - Panda Ecommerce usign Bootstrap</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- My Custom CSS Link -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="Panda-ECommerce-Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backpack">Backpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Bootstrap JavaScript CDN-->
<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>
</body>
</html>
How to fix this problem?
How can I get 100% width on screens less than 768px?
in Bootstrap we have this CSS style:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
for getting 100% width you should remove the padding, so you should use padding: 0 in your CSS style
I hope this solve your problem
Fixed this with the code below (SASS) so we can keep the padding.
/* Fix for bootstrap container */
.container-lg{
#include media-breakpoint-down(lg){
width: auto;
}
}
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 trying to create a navbar using bootstrap that collapses at a certain viewport width. Now, what I'd like to see is that if the navbar is collapsed the navbar-brand disappears and the current active nav item (e.g 'Home', 'About' etc) will be visible on the left, thus enabling the visitor to see at which page they are.
I'm a total bootstrap noob, I had sort of expected to see a css class to be added when the navbar is collapsed/expanded but it doesn't work that way.
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body></html>
Not exactly "out of the box", but a little CSS will work with Bootstrap 4 (no jquery or dup markup)...
https://www.codeply.com/go/5T4icATKjl
This overrides the navbar collapse behavior to use visibility instead of display. This way we can control display of the active nav-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.navbar .collapse {
visibility: hidden;
display: block;
}
.navbar .collapse.show {
visibility: visible;
}
#media (max-width: 767px) {
.navbar-nav .nav-link.active {
visibility: visible;
}
.collapsing {
transition: all 0.35s ease;
height: 40px !important;
}
.collapse:not(.show) .navbar-nav .nav-item:not(.active) {
display: none;
}
}
#media (min-width: 768px) {
.navbar .collapse .navbar-nav .nav-item {
visibility: visible;
}
}
</style>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<div class="collapse" id="navbar1">
<div class="navbar-nav flex-md-row">
<a class="nav-item navbar-brand" href="#">Project name</a>
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link active" href="#">Contact</a>
</div>
</div>
<button class="navbar-toggler align-self-start" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
Notice the #media queries go along with the navbar-expand-md breakpoint of 768px. You can change that to use a diffferent breakpoint if needed.
navbar-expand-sm - 576px
navbar-expand-lg - 992px
navbar-expand-xl - 1200px
There is another solution using duplicate navbar-nav links, but that would require extra markup and I think the CSS only solution above is cleaner.
Have a try of this solution. Although this needs to be advanced to make able nav menu links be clickable.
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$ = window.jQuery
$(document).ready(function(){
$('.navbar-brand').attr('data-brand',$('.navbar-brand').text())
var txtMenu = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtMenu)
$('nav.navbar').on('hide.bs.collapse', function(){
var txtM = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtM)
})
$('nav.navbar').on('show.bs.collapse', function(){
var txtB = $('.navbar-brand').attr('data-brand');
$('.navbar-brand').text(txtB)
})
})
</script>
</body></html>
Not available directly in bootstrap but you can write a small Javascript code here:
function displayActiveMenu() {
if ($(window).width() >= 768) {
// do nothing if we are not collapsed
return;
}
var element = $('li.active', '#navbar').clone();
$('#active-navbar').html(element);
}
displayActiveMenu(); // for the first time
$(window).on('resize', displayActiveMenu);
#media (max-width: 767px) {
#active-navbar {
float: right;
margin: 0;
}
#active-navbar>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- this is the new element -->
<ul class="nav navbar-nav visible-xs" id="active-navbar">
</ul>
<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>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I have recently come across the problem of not being able to add spaces in inline TinyMCE editable areas.
As you can see below, the top 3 navigation items are editable when clicked and you can type any characters, however when you select the "Thislinkcannotcontainspaces" link you cannot add any spaces.
They both use the same data-editable minimal attribute, they both are hooked into a tags, both within an li, I am completely out of ideas as to why this is happening.
The expected behavior is all the nav elements are editable with any characters including the space.
tinymce.init({
selector: '[data-editable-minimal]',
inline: true,
toolbar: false,
menubar: false
});
h2.mce-content-body {
font-size: 200%;
padding: 0 25px 0 25px;
margin: 10px 0 10px 0;
}
body {
background: transparent;
}
.content {
overflow: visible;
position: relative;
width: auto;
margin-left: 0;
min-height: auto;
padding: inherit;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//www.tinymce.com/css/codepen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<nav class="navbar navbar-default navbar-user">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li><a href="#" data-editable-minimal>Forums</a></li>
<li class="dropdown">
<a href="#" class="" role="button" aria-haspopup="true" aria-expanded="false" data-editable-minimal>A Link
<span class="caret"></span></a>
<ul class="dropdown-menu open show">
<li><a href="/" data-editable-minimal>Thislinkcannotcontainspaces</a></li>
</ul>
</li>
<li><a href="/" data-editable-minimal>A link</a></li>
</ul>
</div>
</div>
</nav>
Per the TinyMCE documentation inline mode is intended to function on block level elements only. The <a> tag is not a block level element so its not surprising this would not work.
https://www.tinymce.com/docs/configure/editor-appearance/#inline
The <li> tag is a block level element so if you use that instead do your result change?
It turns out there is a conflict within bootstrap. When using the dropdown module of bootstrap it overrides certain keys when dropdowns are open, as of v3.3.7 it overrides the key codes 38|40|27|32
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>