I'm trying to make a static top bar in a Bootstrap-sass environment.
Problem: Making top bar fixed while keeping it responsive.
I've read CSS documents about inheritance and nested rules, but still unsure how to apply to this case.
Right now, my top bar is fixed to top, but it's not responsive.
CSS
.fixed_pos {
position: fixed;
}
.flowing_body {
margin-top: 100px;
}
Bootstrap CSS
// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}
HTML
<div class="container-fluid">
<div class="fixed_pos row-fluid">
<div class="span9">//left long side of top bar</div>
<div class="span3">//right long side of top bar</div>
</div>
<div class="row fluid flowing_body">
<%= yield %>
</div>
</div>
This is what I tried to add the responsive feature:
CSS
.row-fluid .fixed_pos {
position: fixed;
}
HTML
<div class="row-fluid"><!-- MENUS -->
<div class="fixed_pos">
//everything else the same
</div>
</div>
But then the top bar is shrunk in size and still not responsive.
I appreciate any help with this. There's a very good reference here and I tried to solve it by myself but haven't succeeded yet: Link
This is how I solved the problem:
CSS
.row-fluid .fixed_pos {
position: fixed;
width: 80%;
}
View
<div class="container-fluid">
<!-- TOP BAR, FIXED -->
<div class="row-fluid">
<div class="fixed_pos">
<!-- MENUS -->
<div class="span12">
<ul class="nav nav-tabs">
</appropriate endings..>
Finally the top bar is fixed and responsive.
Add this code in bootstrap-responsive.css
#media (max-width: 979px){
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;}
.container-fluid{ margin-top:70px;}
}
Related
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
Im working on my very first website/freelance project. I have some knowledge of html/css ruby rails and bootstrap so far.
I was wondering if you could help me out with something I havn't been able to look up. I have tried to find out how to make certain part of the page take up the entire portion of the browser's window. The site I am working on is 1 long page, with 4 different sections, each of which needs to take the entire browser's view. I was wondering if there was an easy way with bootstrap to do this? Any help is appreciated, thanks so much.
Use the fluid grid (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem) and add 100% width to your container divs, like:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
</style>
html:
<div class="container">
<div class="row-fluid">
<div class="span4" style="background-color:red;">...</div>
<div class="span8" style="background-color:yellow;">...</div>
</div>
</div>
update:
Split in rows of 50% height:
css:
<style type="text/css">
/* after your bootstrap css inclusing */
body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
{
width: 100%;
}
.fifty {height:50%;min-height:50%;}
</style>
html:
<div class="container">
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:red;">...</div>
<div class="span6 hunderd" style="background-color:yellow;">...</div>
</div>
<div class="row-fluid fifty">
<div class="span6 hunderd" style="background-color:blue;">...</div>
<div class="span6 hunderd" style="background-color:orange;">...</div>
</div>
</div>
Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout?
Note: There is a bootstrap jQuery plugin that does this and so much more that was introduced a few versions after this answer was written (almost two years ago) called Affix. This answer only applies if you are using Bootstrap 2.0.4 or lower.
Yes, simply create a new fixed class for your sidebar and add an offset class to your content div to make up for the left margin, like so:
CSS
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
Demo: http://jsfiddle.net/U8HGz/1/show/
Edit here: http://jsfiddle.net/U8HGz/1/
Update
Fixed my demo to support the responsive bootstrap sheet, now it flows with the responsive feature of the bootstrap.
Note: This demo flows with the top fixed navbar, so both elements become position:static upon screen resize, i placed another demo below that maintains the fixed sidebar until the screen drops for mobile view.
CSS
.sidebar-nav-fixed {
position:fixed;
top:60px;
width:21.97%;
}
#media (max-width: 767px) {
.sidebar-nav-fixed {
width:auto;
}
}
#media (max-width: 979px) {
.sidebar-nav-fixed {
position:static;
width: auto;
}
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav sidebar-nav-fixed">
...
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
...
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
Demo, edit here.
minor note: there is about a 10px/1% difference on the width of the fixed sidebar, its due to the fact that since it doesn't inherit the width from the span3 container div because it is fixed i had to come up with a width. It's close enough.
And here is another method if you want to keep the sidebar fixed until the grid drops for small screen/mobile view.
CSS
.sidebar-nav-fixed {
position:fixed;
top:60px;
width:21.97%;
}
#media (max-width: 767px) {
.sidebar-nav-fixed {
position:static;
width:auto;
}
}
#media (max-width: 979px) {
.sidebar-nav-fixed {
top:70px;
}
}
Demo, edit here.
The latest Boostrap (2.1.0) has a new JS "affix" feature specifically for this type of application, FYI.
this will screw up the responsive Webdesign.
Better wrap the fixed sidebar in a media query.
CSS
#media (min-width: 768px) {
.sb-fixed{
position: fixed;
}
}
HTML
<div class="span3 sb-fixed">
<div class="well sidebar-nav">
<!-- Sidebar Contents -->
</div>
</div>
Now the sidebar is only fixed, if the viewpot is bigger then 768px.
This isn't possible without javascript. I find affix.js too complex, so I rather use:
stickyfloat
I started with Andres' answers and ended up getting a sticky sidebar like this:
HTML:
<div class="span3 sidebar-width">
<div class="well sidebar-nav-fixed">
Sidebar
</div>
</div>
<div class="span9 span-fixed-sidebar">
Content
</div> <!-- /span -->
CSS:
.sidebar-nav-fixed {
position:fixed;
}
JS/jQuery:
sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);
I'm assuming I also need JS to update the 'sidebarwidth' variable when the viewport is resized.
Very easy to get fix nav or everything tag you want. All you need is to write your fix tag like this, and put it in your body section
<div style="position: fixed">
test - try scroll again.
</div>
With the current Bootstrap version (3.3.2) there is a nice way to achieve a fixed sidebar for navigation.
This solution also works well with the re-introduced container-fluid class, meaning it is easily possible to have a responsive full-screen layout.
Normally you would need to use fixed widths and margins or the navigation would overlap the content, but with the help of the empty placeholder column the content is always positioned in the right place.
The below setup wraps the content around when you resize the window to less than 768px and releases the fixed navigation.
See http://www.bootply.com/ePvnTy1VII for a working example.
CSS
#media (min-width: 767px) {
#navigation{
position: fixed;
}
}
HTML
<div class="container-fluid">
<div class="row">
<div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
<!-- Placeholder - keep empty -->
</div>
<div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
...
Huge Content
...
</div>
</div>
</div>