I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
Related
i have an html page whose values are displayed through php, the section starts like below:
#media print {
body * {
visibility: hidden;
}
.section-to-print,
.section-to-print * {
visibility: visible;
}
.section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
#media print {
section {
page-break-after: always !important;
}
}
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
there are like 6 sections in the page, so when i click the print button am getting 2 sections in each page however i want one section only in a page, i did the following css:
this is still giving me 2 sections in a page, can anyone please tell me how to fix it, thanks
Use foreach loop for sections
example
foreach for array
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?>
Provide more information for better solution
This code is a part of the website which i am making and this section keeps overlapping images. How do I correct this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Image of the same:
Because you set image to be always 180x180 if the width will be lower than 540 (+some margins) they will overlap. You can disable it by setting overflow: hidden; on each column. But in your case this should not appear as you are using md columns.
So I think your problem is that you have too much columns. There should be next row each time you exceed row column limit in bootstrap default is 12.
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Make sure your css of the images is position: static;
If you want them in-line with one and other, add: display: inline-block; or if you want it just downwards: display: block;
Refer to positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;
As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.
http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes!
Any help would be greatly appreciated.
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button 2
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>
So... I just added:
#pinned-trigger1 {
position-events: none;
}
And voila!!
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<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>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
In my code i'm using bootstrap (navs) like this in my html :
{{extend 'layout.html'}}
<div class="row" id="container_R_economics">
<div class="span12">
<div class="dropdown ">
<select class=" btn-Action" id="groupe" >
<option value="">Awaiting data...</option>
</select>
</div>
</div>
<div class="span3" id="reportingContainer"></div>
<div class="span7 offset1" id="dashboard">
<div id="combochart"></div>
<div id="control" style='height:50px'></div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs"></ul>
<div class="tab-content" id="graphTabsContent"></div>
</div>
<div class="row" id="container_R_physics">
<div class="span4 offset4" id="dashboard_div">
<div id="chart_div" style='width: 600px; height: 300px;'></div>
<div id="filter_div" style='width: 600px; height: 80px;'></div>
</div>
when i use bootstrap (navs) in my page web in (<div class="row" id="container_R_economics">) and (<div class="row" id="container_R_physics">) i have a scrolling, how i cant deactivate it?
have you tried setting the overflow to hidden:
.yourclass-name{
overflow:hidden;
}