I am using Bootstrap in my project and I have navigation bar in my home page. I want the scroll bar exactly shown in the below link.
http://www.little-neko.com/switcher/?theme=FatCatz
The scroll bar should not come where the navigation/top bar and it should start from the rest of content.
Please let me know, how to apply the css style to get partial scroll bar, which was shown in the above link. I hide the scroll bar by using the css style "body { overflow: hidden }", but not able to put the scroll bar in the child DOM node(div element).
It is an iframe, which is not recommended now a days.
<html>
<head>
<style>
.fixed{
z-index: 99999; //some very high value
position: fixed;
}
</style>
</head>
<body>
<div class="fixed">Fixed Content</div>
<iframe src="anyURL" frameborder="0" width="100%"></iframe>
</body>
</html>
Related question : Make fixed footer work with fixed header
Demo : http://jsfiddle.net/virendrachandak/cF2Fv/show/
I have solved my problem by using the below sample:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
http://jsfiddle.net/avrahamcool/QMsuD/
Half fixed, half scrollable layout that can be scrolled... CSS
Never use a i-frame for a website structure such as a header footer or anything for that matter. If you would like to accomplish a "sticky" header you need to use the proper bootstrap code for fixed to top.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
You can ready more about this at www.getbootstrap.com you can also look at the code here and see how they have accomplished this.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
You can see the working example here http://getbootstrap.com/examples/navbar-fixed-top/.
Related
I have the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<nav class="col-sm-6">
<span class="pull-left">
<a href="#" class="navbar-left">
<img src="img/gyn.png" alt="" class="logo">
</a>
</span>
</nav>
<nav class="col-sm-6">
<span class="pull-right">
<ul class="nav navbar-nav thmbl">
<li><a class="tupac" href="#team"><strong>TEAM</strong></a></li>
<li><a class="tupac" href="#services"><strong>SERVICES</strong></a></li>
<li><a class="tupac" href="#gal"><strong>GALLERY</strong></a></li>
<li><a class="tupac" href="#location"><strong>LOCATION</strong></a></li>
</ul>
</span>
</nav>
</div>
</div>
</nav>
For the life of me I can't understand why the logo is displaying at full size and not being contained in the Navbar. I basically want the logo on the left and my menu items on the right. Moreover, I want them to always be on the samle line, i.e. when I resize the windows (or on a smaller screen like an iPhone for example), it scales down. Maybe I have tunnel vision but can anyone perhaps point out the problem?
Can't say for sure without looking at your css, but images will only be resized if the logo class is configured correctly. You may want to look at this example https://codepen.io/bootstrapped/pen/KwYGwq on how to configure css properly.
For what concerns wrapping, the default behaviour is to wrap especially as you are dividing the screen in 2 columns when small. An option is to play around with CSS (see How to make bootstrap 3 navbar not wrap). Alternatively, play with column sizing so that a small logo doesn't take half screen real estate and the menu items are scaled correctly. For very small screen, the best option is to collapse and show a vertical menu.
This code from bootply should do what you need:
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
and this is the CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}
I'm having an issue where a banner image (the "Review Us" text and lines) is not centering correctly when trying to adjust the screen size. Here is a before and after of what my issue is. The after image is also showing the same results on mobile screens
before
after
The HTML for that image goes as followed:
<div class="rowBanner">
<img src="images/reviewus.png" alth="review">
</div>
The only CSS in effect is on
div.rowBanner{
padding-top: 40px;
text-align:center;
}
I would like the "Review Us" text part of the image to be centered (left-to-right) regardless of screen width
The problem you have might be from desktop to mobile the hambuger menu shift your logo. using position absolute with transform: translate(-50%, 0%); will center your img by its own width.
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
Centering Percentage Width/Height Elements
REF: https://css-tricks.com/centering-percentage-widthheight-elements/
.navbar {
position: relative;
}
.rowBanner {
position: absolute;
left: 50%;
display: block;
transform: translate(-50%, 0%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="rowBanner">
<img src="http://via.placeholder.com/100x50" alth="review">
</div>
<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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Just add this css to the image:
div.rowBanner > img {
display: block;
margin: 0 auto;
max-width: 100vw;
}
Edited: Added a maximum with to the img, 100vw means 100 viewport width units, See: http://caniuse.com/#feat=viewport-units
You may try following CSS:
div.rowBanner {
margin-left:auto;
margin-right:auto;
width:80%;
}
What about using CCS background-image to set your image. You can then control where the center point is on different resolutions via background-position
function resize(isDesktop) {
if (isDesktop) {
$('.banner').css('width', '100%');
} else {
$('.banner').css('width', '200px');
}
}
.banner {
background-image: url('https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg');
background-size: cover;
background-position: center;
height: 175px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="resize(true)">Desktop</button>
<button onclick="resize()">Mobile</button>
<div class="page">
<div class="banner">
</div>
</div>
I am using jasny-bootstrap's navmenu along with a navbar both of which have their own toggle buttons which will collapse them.The view works very nicely on mobile views but the navbar items render oddly when preseneted in a desktop or a tablet view.
This is a jsfiddle that has my code.
This is the CSS:
html, body {
height: 100%;
}
body {
padding-top:60px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
a.navbar-toggle {
float: right;
margin-right: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
#media (min-width: 0) {
.navbar-toggle-reveal {
display: block;
/* force showing the toggle */
}
}
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
This is the markup:
<div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Project name</a>
<div class="nav navmenu-nav">
<table class="table table-responsive table-hover table-striped table-bordered">
<tbody>
<tr>
<td>DESCRIPT</td>
<td>This is a description</td>
</tr>
<tr>
<td>EQUICATGRY</td>
<td>M</td>
</tr>
<tr>
<td>PLANGROUP</td>
<td>010</td>
</tr>
<tr>
<td>PLANPLANT</td>
<td>0001</td>
</tr>
<tr>
<td>OBJECTTYPE</td>
<td>001</td>
</tr>
<tr>
<td>AUTHGRP</td>
<td>3000</td>
</tr>
</tbody>
</table>
</div>
<ul class="nav navmenu-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top navbar-pills">
<button type="button" class="navbar-toggle navbar-toggle-reveal" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
<div class="navbar-header">
<!--navbar-toggle is not hidden when not in lg,md,xs grid,it is visible on the far-left rather than on the far-right --> <a href="#" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Fargo</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left">
<li>Left Home
</li>
<li>Left Work
</li>
<li>Left Mobile
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Work
</li>
<li>Mobile
</li>
</ul>
</div>
</div>
<div class="container">
<p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
<p>On the contrary of the push effect, the menu doesn't move with the canvas.</p>
<p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
<p>Note that in this example, the navmenu doesn't have the <code>offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
<p>Also take a look at the examples for a navmenu with slide in effect and push effect.</p>
</div>
<!-- /.container -->
</div>
I'm not sure how exactly you want it to look (what does "render oddly" mean? How should it render?) but I'm fairly certain it's the entire last media query that is giving you trouble:
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
This block says that for any screen size above 992px wide a couple of styles change that are definitely making your navbar look strange compared to the smaller screen view. Remove that block and see if it solves your problem.
I have been trying to code a responsive header using Bootstrap 3, I just have one.
There is a space above the navigation list, and below the logo as well.
How can I line up the two of them? (logo&nav)
Picture of my header which explains the problem:
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<script src="js/respond.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<img src="img/logo.png" alt="logo" class="visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="container">
<div class="collapse navbar-collapse" id="collapse">
<img src="img/logo.png" alt="logo" class="hidden-xs push-left">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>pages</li>
<li>Blog</li>
<li>Portfilio</li>
<li>Conact</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Structurally your html differs than my approach and from the docs on bootstrap for the navbar implementation. You put .row around col-* classes. You don't need to duplicate the logo for small and large, if it's the same image. You can also just modify the brand and positioning in the min-width. Don't know your logo widths, but you can easily adjust in the min-width what you need and, also in the min-width, adjust the padding on the parent a so that it visually is in line with the logo.
DEMO: http://jsbin.com/aXAyicIS/1/
EDIT: http://jsbin.com/aXAyicIS/1/edit
CSS
.navbar-brand {
width: 100%;
padding: 0 70px 0 15px;
}
/* logo image on mobile */
.navbar-brand img {
max-width: 100%
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
#media (min-width:768px) {
.navbar-brand {
float: none;
width: auto;
max-height: none;
padding: 0!important;
}
.navbar-header {
float: left;
margin: 0;
width: 30%;
}
/* logo image */
.navbar-brand img {
margin: 0;
max-width: 100%;
max-height: none;
}
.nav.navbar-nav li.active a,
.nav.navbar-nav li.active a:hover {
background: transparent
}
#nav-collapse {
float: right;
padding: 0!important;
margin: 0!important;
width: 70%;
}
}
HTML
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<img src="http://placehold.it/300x80/444444/FFFFFF&text=LOGO">
</div>
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--.navbar-->
Using the bootstrap v3 framework How do I create a Navigation header that is below or part of a jumbotron or large container (like a marquee image) but sticks to the top when user scrolls down?
I started with the bootrap example and placed it below a marquee image. However, how do you change to navbar-fixed-top and detect when user has scrolled to an appropriate position?
Example:
poolhousedigital.com
HTML:
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="intro" class="container">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div> <!-- /container -->
</div> <!-- /jumbotron -->
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
body {
min-height: 2000px;
padding-top: 0px;
}
.jumbotron {
position: relative;
background: none;
padding: 0px;
margin-bottom: 0px;
min-height: 500px;
}
.jumbotron:after {
content:"";
background: url("img/2gratermay20121.jpg");
background-repeat:no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
See this example on Bootply: http://bootply.com/95797
The example uses a masthead, but you can replace this with your jumbotron.
Here is another example.. http://bootply.com/96188#
Both use the Affix plugin to attach the nav after scroll.