I have a large header section for a website that is split into three sections; social links, logo, and then the navigation bar. I am trying to figure out how I can hide the top two elements and resize the navigation bar and have it fixed when the user scrolls past it.
The nav bar currently just holds a link that will open up a separate side menu that holds all of the actual page navigation.
https://jsfiddle.net/cxekxrxy/2/
<header>
<!-- social links -->
<div id="social" class="social-header">
<div class="container">
<div class="row">
<ul>
<li class="social-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- logo -->
<div id="logo" class="logo-header">
<div class="container">
<div class="row">
<h1 class="logo-main">Main Header</h1>
<h2 class="logo-sub">Sub Header</h2>
</div>
</div>
</div>
<!-- Navigation -->
<div id="header" class="main-header">
<div class="container">
<div id="bars"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></div>
</div>
<!-- nav links (hidden until <span> is pressed) -->
<div id="main-nav" class="side-nav">
×
<span class="glyphicon glyphicon-home"> Home</span>
<span class="glyphicon glyphicon-user"> About</span>
<span class="glyphicon glyphicon-picture"> Portfolio</span>
<span class="glyphicon glyphicon-envelope"> Contact</span>
</div>
</div>
</header>
You can see this neat example for your need:
https://css-tricks.com/scroll-fix-content/
And work with your code.
This is combination CSS and JS, and a simplest solution
.
Related
This code below for the menu, all links scroll down to a certain section, except for the Blog button that should send the user to another link, but it doesn't work, it only works if I write click and choose open in new tab
here is the code
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
If you want to open your link in a new tab you can use the target='_blank' attribute. If you wish to open it in the same window then don't include this attribute. See the code snippet below. (Note that the target blank attribute will not work on this site, so test it locally or on this fiddle)
Also, ensure the you have the full url, including www.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://www.example.com/blog/" target="_blank">Blog</a>
</div>
<!-- .hm-content end -->
</div>
<!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
<!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div>
<!-- .header-menu-and-meta end -->
Its working fine for me it redirects to link.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
You can control the behaviour of redirection of the anchor tags by setting the target attribute.
by default property it has is self: target="_self"
You want to achieve is target="_blank"
I took the image clip from Mozilla Developers Network.
Ok I found the problem it was in the JS files, the HTMLAnchorElement was set to preventdefault
I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.
I am having troubles with Isotope on Navbar. I would like the content to be switched when selecting different Navbar items.
Not sure what do I have to do, this is simplified version of what I have for now.
I guess I need some Javascript that will handle the switching from navbar's href's to isotope's classes? Is this possible like this?
HTML Navbar
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-main-collapse" id="#options">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
</div>
</nav>
HTML Content
<section class="main-content">
<div class="isotope-elements-grid" id="isotope-elements-grid">
<div class="isotope-element home">
<p>Some random text on Home</p>
</div>
<div class="isotope-element about">
<p>Some random text on About</p>
</div>
</div>
</section>
Javascript
$('.isotope-elements-grid').isotope({
// options
itemSelector: '.isotope-element',
layoutMode: 'fitRows'
});
I have this Li tag which shows notification dropdown in my bootstrap theme but the problem is if there is no content inside this li tag then also it is shown with 300px height, I have tried removing that height also but still no luck. How can I resize this li tag if there is no content inside it.
Content is shown in media-body tag
<li class="dropdown navbar-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu">
<div class="dropdown-header">
<span class="title">Notifications
<strong>(0)</strong>
</span>
</div>
<div class="dropdown-body niceScroll">
<div class="media-list small">
<a href="" class="media">
<div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i>
</div>
<div class="media-body">
<span class="media-text">No new Notification</span>
<!-- Start meta icon -->
<span class="media-meta"></span>
<!--/ End meta icon -->
</div>
<!-- /.media-body -->
</a>
</div>
</div>
<div class="dropdown-footer">
See All
</div>
</div>
</li>
$(".navbar-notification .niceScroll").mouseover(function() {
$(".navbar-notification .niceScroll").niceScroll({
cursorwidth: '10px',
cursorborder: '0px'
}).resize();
});
You can select empty element by css :empty selector and hide it:
element:empty {
display: none;
}
I am using twitter bootstrap version 3 and for some reason the width of the columns don't add up right.
Take a look at this shot: http://i.imgur.com/LhgqL12.png
The right column doesn't line up with the end of the carousel and I cannot figure out why!
Here's the html for the page:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li class="dropdown">
Community <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forum</li>
<li>IRC Chat</li>
<li>Twitter</li>
<li>Sales Twitter</li>
<li>Google+</li>
<li>Links</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> liamdawe <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>User CP</li>
<li>Private Messages</li>
<li>Admin CP <span class="badge badge-important">3</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- logo -->
<img src="/templates/default/images/logo.png" height="120" width="600" alt="logo" class="logo-center" />
</div>
</div>
<div class="row">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/uploads/carousel/1294630814id6gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Join our Minecraft server!</h3>
</div>
</div><div class="item">
<img src="/uploads/carousel/882399500id7gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Natural Selection 2 Out on the 30th for Linux!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="row">
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div>
<!-- new sales -->
<div class="row">
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Our News</li>
<li >Featured Videos</li>
<li >News Elsewhere</li>
</ul>
<div id="maincontent">
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/549850194id2121gol.jpg">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:56 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
<div class="seperator"></div>
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/test-hhhhhhhhhhhhhhhhhhhh.2120" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/5407865id2120gol.">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Test Hhhhhhhhhhhhhhhhhhhh</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:52 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 0 Comments</p>
</div>
</div>
<div class="seperator"></div>
</div>
<div class="row">
<div class="span3">
<div class="pagination">
<ul><li class="disabled previouspage">Prev</li><li class="disabled">1</li><li class="disabled">/</li><li>99</li><li class="nextpage">Next</li></ul></div></div>
<div class="span2" style="padding-top: 18px; padding-bottom: 18px;">
<form name="form2" class="form-inline">
Pick Page: <select class="input-mini" name="jumpmenu" onchange="window.open(this.options[this.selectedIndex].value, '_self')"><option value="/home/page=1">1</option><option value="/home/page=2">2</option><option value="/home/page=3">3</option><option value="/home/page=4">4</option><option value="/home/page=5">5</option><option value="/home/page=6">6</option><option value="/home/page=7">7</option><option value="/home/page=8">8</option><option value="/home/page=9">9</option><option value="/home/page=10">10</option><option value="/home/page=11">11</option><option value="/home/page=12">12</option><option value="/home/page=13">13</option><option value="/home/page=14">14</option><option value="/home/page=15">15</option><option value="/home/page=16">16</option><option value="/home/page=17">17</option><option value="/home/page=18">18</option><option value="/home/page=19">19</option><option value="/home/page=20">20</option><option value="/home/page=21">21</option><option value="/home/page=22">22</option><option value="/home/page=23">23</option><option value="/home/page=24">24</option><option value="/home/page=25">25</option><option value="/home/page=26">26</option><option value="/home/page=27">27</option><option value="/home/page=28">28</option><option value="/home/page=29">29</option><option value="/home/page=30">30</option><option value="/home/page=31">31</option><option value="/home/page=32">32</option><option value="/home/page=33">33</option><option value="/home/page=34">34</option><option value="/home/page=35">35</option><option value="/home/page=36">36</option><option value="/home/page=37">37</option><option value="/home/page=38">38</option><option value="/home/page=39">39</option><option value="/home/page=40">40</option><option value="/home/page=41">41</option><option value="/home/page=42">42</option><option value="/home/page=43">43</option><option value="/home/page=44">44</option><option value="/home/page=45">45</option><option value="/home/page=46">46</option><option value="/home/page=47">47</option><option value="/home/page=48">48</option><option value="/home/page=49">49</option><option value="/home/page=50">50</option><option value="/home/page=51">51</option><option value="/home/page=52">52</option><option value="/home/page=53">53</option><option value="/home/page=54">54</option><option value="/home/page=55">55</option><option value="/home/page=56">56</option><option value="/home/page=57">57</option><option value="/home/page=58">58</option><option value="/home/page=59">59</option><option value="/home/page=60">60</option><option value="/home/page=61">61</option><option value="/home/page=62">62</option><option value="/home/page=63">63</option><option value="/home/page=64">64</option><option value="/home/page=65">65</option><option value="/home/page=66">66</option><option value="/home/page=67">67</option><option value="/home/page=68">68</option><option value="/home/page=69">69</option><option value="/home/page=70">70</option><option value="/home/page=71">71</option><option value="/home/page=72">72</option><option value="/home/page=73">73</option><option value="/home/page=74">74</option><option value="/home/page=75">75</option><option value="/home/page=76">76</option><option value="/home/page=77">77</option><option value="/home/page=78">78</option><option value="/home/page=79">79</option><option value="/home/page=80">80</option><option value="/home/page=81">81</option><option value="/home/page=82">82</option><option value="/home/page=83">83</option><option value="/home/page=84">84</option><option value="/home/page=85">85</option><option value="/home/page=86">86</option><option value="/home/page=87">87</option><option value="/home/page=88">88</option><option value="/home/page=89">89</option><option value="/home/page=90">90</option><option value="/home/page=91">91</option><option value="/home/page=92">92</option><option value="/home/page=93">93</option><option value="/home/page=94">94</option><option value="/home/page=95">95</option><option value="/home/page=96">96</option><option value="/home/page=97">97</option><option value="/home/page=98">98</option><option value="/home/page=99">99</option></select></form></div></div>
</div>
<!-- Sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- Articles Sidebar -->
<ul class="list-group">
<li class="list-group-item"><i class="icon-heart"></i> Editor's Picks</li>
<li class="list-group-item"><i class="icon-star"></i> Popular this week</li>
<li class="list-group-item"><i class="icon-th-large"></i> View by Category</li>
<li class="list-group-item">
<form name="form1">
<select onchange="window.open(this.options[this.selectedIndex].value, '_self')" class="form-control">
<option>Pick One</option>
<option value="/articles/category/17">Coming Soon</option>
<option value="/articles/category/14">Competition</option>
<option value="/articles/category/7">Crowdfunding</option>
<option value="/articles/category/13">Desura</option>
<option value="/articles/category/1">Editorial</option>
<option value="/articles/category/20">FPS</option>
<option value="/articles/category/16">First Look</option>
<option value="/articles/category/9">Free Game</option>
<option value="/articles/category/8">Game Bundle</option>
<option value="/articles/category/4">Game Sale</option>
<option value="/articles/category/6">Indie Game</option>
<option value="/articles/category/18">Indie Game</option>
<option value="/articles/category/3">Interview</option>
<option value="/articles/category/10">MMO</option>
<option value="/articles/category/0">No Category</option>
<option value="/articles/category/11">Open Source</option>
<option value="/articles/category/21">RTS</option>
<option value="/articles/category/2">Review</option>
<option value="/articles/category/5">Steam</option>
<option value="/articles/category/12">Unity3D</option>
<option value="/articles/category/15">Wine</option>
</select>
</form>
</li>
<li class="list-group-item">Article Search</li>
<li class="list-group-item">Submit Article</li>
</ul>
<!-- twitter Sidebar -->
<div class="well well-sm">
<a class="twitter-timeline" href="https://twitter.com/gamingonlinux" data-widget-id="381375312019218432" height="400">Tweets by #gamingonlinux</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>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-md-12">
<div class="well text-center">
<strong>GamingOnLinux</strong> the Linux Games website, Copyright © GamingOnLinux.com 2009-2014.
<br />Page generated in 0.025 seconds, MySQL queries: 10<br />
</div>
</div>
</div>
</div>
</div>
What I want is for the right panels width to extend to the end of the carousel, currently it falls short as you can see there is a gap on the right of blank space after the sidebar.
I think that the problem is not the right hand panel but a couple of other things.
First, the carousel is inside a .row but not inside a .col-md-12 mean there'll be a negative margin to the sides, but no padding on the col to negate that.
So add that in here:
<div class="row">
<div class="col-md-12">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>
</div>
</div>
Second, you've nested some rows (.row) for your alert boxes. That's causing them to be pulled out of line because of the negative margin that rows have. You either need to add a col-md-12 around each alert (because the padding on cols negates the rows negative margin) or you remove the .row completely. That works because the div is just 100% width of the parent column which is fine.
So remove the row below:
<!-- notification -->
<div class="row"> <!-- REMOVE THIS -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div> <!-- REMOVE THIS CLOSING DIV TOO -->
Demo
Try to define your col-md-3 boostrap is a grid of 12, you have defined mid to be 9
also to avoid the padding of container / row create a .nopadding { padding:0 !important }