I am looking to ellipse one of the header Text components when the viewport size is small to prevent the header from wrapping and becoming two lines.
Details here : https://jsfiddle.net/3L8ch5bo/7/ As you change the width of the viewport - you will see that the header goes into two lines.
I would like it to the ellipse in this way : https://jsfiddle.net/vsj896as/1/
The problem with ellipsing shown above is that it forces the header to be a fixed length. Is there a way to have it ellipsed based on size of the viewport (using max-width: calc(..) for example).
Please note that the "Left Text" on the header is non-standard bootstrap header component and is causing the complexity. It is needed and cannot be shortened and should be displayed in full.
Any help is greatly appreciated..
Here is the html code :
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="pull-left headComp">Left Text</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" 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>
<div class="navbar-brand ellipsed">How to Ellipse This Very Very Long Header Text</div>
</div>
<div class="collapse navbar-collapse" id="menu-items-collapse">
<ul class="nav navbar-nav">
<li class="active"><a target="_blank" href="url1">Home</a></li>
<li class="active"><a target="_blank" href="url2">Getting Started</a></li>
<li class="active"><a target="_blank" href="url3">Contact</a></li>
<li class="active"><a target="_blank" href="url4">Videos</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container-fluid" style="text-align: center;">
<h1>Jumbo Message</h1>
</div>
</body>
Here is a quick way to complete what you want. The code attached and in the provided jsfiddle checks the viewport size on document.ready. If the size is less than 768px the text within the .navbar-brand will shorten.
The .resize event triggers the responsive part. If viewport is greater than 768px then the original text will show else if the viewport is less than the shortened text will show.
Hope that helps or at least points you in the right direction.
view jsfiddle here
$(function(){
var $startingView = $(window).width();
var $startingBrand = $('.navbar-brand');
if($startingView < 768) {
$startingBrand.text("How To...")
}
$(window).resize(function(){
var $viewportWidth = $(window).width();
var $brand = $(".navbar-brand");
var originalTitle = "How to Ellipse This Very Very Long Header Text";
var shortTitle = "How To...";
if($viewportWidth < 768) {
$brand.text(shortTitle);
}else{
$brand.text(originalTitle);
}
});
});
.headComp {
color: white;
margin-top: 16px;
width: 95px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="pull-left headComp">Left Text</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" 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>
<div class="navbar-brand">How to Ellipse This Very Very Long Header Text</div>
</div>
<div class="collapse navbar-collapse" id="menu-items-collapse">
<ul class="nav navbar-nav">
<li class="active"><a target="_blank" href="url1">Home</a></li>
<li class="active"><a target="_blank" href="url2">Getting Started</a></li>
<li class="active"><a target="_blank" href="url3">Contact</a></li>
<li class="active"><a target="_blank" href="url4">Videos</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container-fluid" style="text-align: center;">
<h1>Jumbo Message</h1>
</div>
</body>
Related
So when my webpage is viewed on mobile devices, the responsive nav menu auto closes when a link is selected in the drop down nav. Works fine on android and up to iPhone 6s. Just tested it on an iPhone 8 plus, but for some reason the auto close function does not work and it has to be closed manually. Any ideas on how to fix it?
//Javascript
//Auto-close responsive navbar after selection
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
//HTML - using Bootstrap 3
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo_flat.png" class="img-responsive" style="width: 140px; margin-top: -16px;"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">About Us</li>
<li class="">What We Do</li>
<li class="">FAQs</li>
<li class="">Careers</li>
<li class="">Contact Us</li>
</ul>
</div>
</div>
</div>
</nav>
Try this
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
This solved my issue for both the iPhone and iPad:
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
I have 3 menu items in my navbar. I want the entire nav to be divided into 3 parts for my 3 menus. I tried with the following code but the last menu item takes bit extra space than others. How do i fix it?
.navbar {
border : 1px solid #ffffff;
}
#intr1, #intr2 {
border-right: 1px solid #ffffff;
}
.menuLabel {
text-align: center;
font-size: 17px;
font-weight: bold;
color: #ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-header ">
<ul class="nav navbar-nav container">
<li class="col-md-4" id="intr1"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr2"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr3"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try with something like this:
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul>
<li class="col-md-4" id="intr1">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr2">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr3">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I hope this will help you a lot:
HTML:
<nav class="navbar navbar-default">
<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" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav customnavbarnav">
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar navbar-default -->
CSS:
.customnavbarnav{
width: 100%;
text-align: center;
}
.customlist{
width: 33.33333333333333%
}
Just remove the .container class on the .navbar-nav because that is causing you to have 15px right padding which throws off the evenness.
I'm using Bootstrap 3 and i want to change the background color and hover state for the links for .navbar-inverse. I tried every single thing and classes, without any luck. Its still showing the same dark gradient.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">
<img src="images/logo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hotel">Hotel</li>
<li>Rooms & Suites</li>
<li>Reservation</li>
<li>Activities</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- End Of Navigation -->
Your browser's developer tools can easily help you to find the correct selectors to use. Right Click > Inspect Element
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
color: red;
background: green;
}
DEMO
I'm using twitter bootstrap on my site and when I collapse the window partially, this happens!
If I collapse the window further, then the desired button appears and the links disappear.
Q) Why is this happening? I want the nav links to collapse at this window width, leaving the button. Nav code below:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="/" style="font-size: 24px;">My brand name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="<%= GetCssClassNavItemHome() %>">Home</li>
<li class="<%= GetCssClassNavItem("/about") %>">About</li>
<li class="<%= GetCssClassNavItem("/services") %>">Services</li>
<li class="<%= GetCssClassNavItem("/project") %>">Projects</li>
<li class="<%= GetCssClassNavItem("/prices") %>">Prices</li>
<li class="<%= GetCssClassNavItem("/blog") %>">Blog</li>
<li class="<%= GetCssClassNavItem("/contact") %>">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a target="_blank" href="http://www.linkedin.com/">
<i class="fa fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
The problem is the padding applied in the class .container - 15px both left and right. If you reduce the padding, the problem goes away.
If you add another class to the div.container - in this example, say lesspadding:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container lesspadding">
etc.
and then apply different padding to the new class, like so:
.lesspadding {
padding-left: 10px;
padding-right: 2px;
}
Bootply here
Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/
Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.