I have a site that uses off canvas navigation. At a certain point the off canvas navigation will get too long and will start to overlap the footer. what can I do to push the footer down so there is no overlap?
I do not need a sticky footer. The footer just has to be below the navigation if there is a overlap.
Put this around your navigation:
<div style="padding-bottom: HEIGHT OF FOOTER">
<!-- Navigation markup -->
</div>
Related
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
I'm working on a site using the Bootstrap 3.0 framework. I'm trying to get a kind of half border effect where there is a different background for the header and left navigation that wraps around the top and left of the page while the main content would have a darker background that extends from the left navigation infinitely to the right. I have the main content wrapped in a container and I know I'm able to extend backgrounds infinitely to the left and right by placing the content div inside of a div or other element and making that element's width 100% but how would I do this with a specific column that is already inside of a row? The main content is in a row that also has the navigation on the left. The site can be found here... http://jacobbuller.com/testsites/derekdavis/index.html
Please let me know if you have any suggestions!
--- EDIT ---
I'm trying to explain this a little clearer.
Here are two images showing what I have now and what I would like...
Basically I have a the header tag at 100% width and then inside of that I have the content wrapped in the container class to make sure it's center on the page. This way I can make the top header have a different background then the rest of the image. The rest of the page is made up of two columns wrapped in a container div. The problem I am having is making the background for the main col on the right expand 100% to the right. Here is what I would like it to look like...
I want the background of the main content col to extend 100% to the right to give the impression that it's being framed by the top header and left navigation.
Here is a short version of the header...
<header>
<div class="container">
<div class="row">
</div><!--End row -->
</div><!--End container -->
</header>
And the main content...
<div class="container">
<div class="equalHeights-sidenav"><!--equal heights JQuery so left nav is same width as main content -->
<div class="row">
<div class="sidebar-offcanvas col-xs-12 col-sm-3 col-md-3 col-lg-3">
</div><!-- End col -->
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 content">
<div class="row"><!-- start main content row -->
</div>
</div>
There are more rows and col in the main content div but these are the two main divs surrounded it. Let me know what you think the best course of action is... if it's possible at all that is.
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
I tried to setup a navbar which is always at the very left of the screen, and a main container which is always right of the navbar. Currently it is always below the navbar. The main container (titled with dashboard) should always be right of the navbar, even if the screen is too small. In the main container there is currently only one table shown. The width of this table should be fluid.
Here are my jsfiddle resources:
Source
Result
It would be great if I could set the width when the main body is not shrinking anymore, something like a min-width for the main container.
Would appreciate any help.
Sidebar must be inside the container to get it and the "dashboard" side by side.
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<!--Sidebar content-->
</div>
<div class="span8">
<!--Dashboard content-->
</div>
</div>
</div>
To prevent resizing under certain screen sizes, just get a custom Bootstrap here, unchecking that sizes you don't want to support.
I recently used display:table and display:table-cell properties.
It was like this,
<div id="main" style="display:table">
<div id="left-menu" style="display:table-cell">
Some menu links
</div><!-- End left-menu -->
<div id="content" style="display:table-cell">
The actual content
</div><!-- End content -->
</div><!-- End main -->
I used this because the left-menu background color extends to the bottom, I mean its height is equal the content div. So I dont have to use a background img in my main div which I have to do repeat-y.
But the problem is that the menu links are places in the center of left-menu div and not the top, which is required.
I then had to use position:absolute and top:0 to place the menus at the top of the left-menu div. Which doesnt look to be proper.
Have anybody faced this problem?
You can use faux columns to simulate scaling background images for main content and sidebar divs.