I just started with bootstrap 3 and got stuck on an issue. I wanted to have a side menu like in this documentation which is positioned fixed during scroll down and highlights sections accordingly. I have managed to get something done very similar to this but when I resize the window to mobile size, the side menu overlaps the content instead of being on top of it. If you checked the link, when you resize the window, the sidemenu goes on top of the content.
I believe the culprit here is affix-top but I leave it to the experienced people here in stackoverflow
<body data-spy="scroll" data-target="#myScrollspy">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Title
<small>Subheading</small>
</h1>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Sidebar Menu -->
<div class="col-md-2" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<!-- Content Column -->
<div class="col-md-9">
<h2 id="section-1">Section One</h2>
<h2 id="section-2">Section Two</h2>
<h2 id="section-3">Section Three</h2>
<h2 id="section-4">Section Four</h2>
<h2 id="section-5">Section Five</h2>
</div>
</div>
</div>
</body>
How can this be fixed?
What you are looking for is called a CSS media query, which allows you to modify a style rule based on media features such as color, height, and width. The Bootstrap page you linked to uses min- and max-width features to change how the sidebar appears, which you can see in its CSS filenear the bottom of the page. The pertinent code looks like this:
#media (min-width: 768px) {
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
.bs-docs-sidenav.affix {
top: 0;
}
}
#media (max-width: 767px) {
/* Sidenav */
.bs-docs-sidenav {
width: auto;
margin-bottom: 20px;
}
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
}
I have simplified it a little bit, but that should be enough to get you started. When the max-width is less than 768px the sidebar width will change to auto, and the affix code will keep the sidebar at the top of the page.
Related
I have a problem with the navbar-fixed-top item. It hides content form the container.
This is a common problem solved by adding the following css code :
body { padding-top: 70px; }
Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.
I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.
Here is the code below :
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
Go to test1
</li>
<li class="nav-item">
Go to test2
</li>
<li class="nav-item">
Go to test3
</li>
<li class="nav-item">
Go to test4
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
Here's the solution
body {
padding-top: 70px;
}
#test{
padding-top:90px;
}
#test2{
padding-top:90px;
}
#test3{
padding-top:90px;
}
#test4{
padding-top:90px;
}
For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed.
Hope that helps.
From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.
I have add this class in the css file :
.hreflink::before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
and then I have define every element I want to go to with this class, for example :
<div id="test3" class="hreflink">
I've got a fairly simple Bootstrap 3 based layout where I want the main element (a central div) to expand or contract vertically to fill the available space as the browser window is resized, but allowing for a couple of elements below that, so that the height of all the elements neither overflows the window height (thus causing a scroll bar to appear) or underflows (thus wasting visible vertical space in the window).
Closest I can get to achieving this is as follows. Problem is that the ".90-height" class (height: 90%) either leads to slightly too little or slightly too much total height for all the elements, depending on vertical window size.
CSS:
.full-height { height: 100%; }
.90-height { height: 90%; }
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; }
.controlsdiv { display: table; width: 100%; }
HTML:
<html class="full-height">
<body class="full-height">
<div class="navbar navbar-fixed-top" style="min-height:20px !important;">
<div class="container-fluid full-height">
<div class="row 90-height">
<div class="90-height"> <-- Main column -->
<div class="doborder full-height">
<-- Content here -->
</div>
<div class="controlsdiv">
<-- Couple of controls in here -->
</div>
</div> <-- End main column -->
</div> <-- End row -->
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
</div> <-- End container -->
</body>
</html>
Only thing is I can't simplify this structure at all - i.e. remove any of the elements as I need them all for various things.
There are a few different ways you could approach it. Also reminder that CSS class names shouldn't start with numbers. You could use CSS calc() to subtract the height of the footer from the body. You only need to use height-90 once on the main container.
CSS calc() Demo http://www.codeply.com/go/mbXpavYiV8
.height-90 { height:calc(100% - 50px); }
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li>Link</li>
</ul>
</div>
<div class="container-fluid height-90 bg-info">
<div class="row">
<div class="">
</div>
<div class="controlsdiv">
</div>
</div>
</div>
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
Another solution is to use flexbox..
.full-height { display: flex; flex-direction: column; height: 100%; }
.fill-height { flex-grow: 1; width: 100%; }
Flexbox Demo http://www.codeply.com/go/tFUf5XFe29
Below is the link to my current implementation of Navbar using bootstrap 3.1.1.
I have used container class to all Nav also. is it the correct implementation ? if I don't use container class to nav, it exceeds the width of Container. So I had to use it. Can someone please confirm whether its the right implementation?
When I click on any button, the MainContent Child div's Slide up or Slide Down, once it crosses the Nav bar. I want it to be hidden (Scrolling div which you see above the Nav Bar), but its not hiding. I've tried to add one more div above Nav, but even that exceeeds the width of container though its inside container. So I've tried to use container class for that also, it worked fine but when I resize my browser to small size that div disappears and again I am able to see mainContent child item moving able the Nav bar.
HTML
<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
<head>
</head>
<body>
<div class="container">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="container inside-bar">
<ul class="nav navbar-right">
<li class="active">About</li>
<li>Services</li>
<li>Our Staff</li>
<li>book</li>
<li>Gift Cards</li>
<li>Reviews</li>
</ul>
</div>
</nav>
</div>
<div id="mainContent">
<div id='Services' class="box">
Services
</div>
<div id='about' class="box">
About
</div>
<div id='OurStaff' class="box">
Our Staff
</div>
<div id='book' class="box">
book
</div>
<div id='Gift' class="box">
Gift
</div>
<div id='Reviews' class="box">
Reviews
</div>
</div>
</div>
</body>
</html>
Currently in the link you will not see the Div which I added before Nav.
http://codepen.io/anon/pen/DmiGs
you can add container . Implementation is ok
.navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}
How can I hide the side bar in mobile?
CSS:
.sidebar-nav {
padding: 9px 0;
}
.sidebar-nav .nav-header {
font-size: 18px;
color:#FF9900;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Content Management</li>
<li>test</li>
<li>test2</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="col-md-9">
<div class="container">
<div class="row">
.....
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 hidden-xs">
The "mobile" breakpoint default is 767px. To hide something at that size, just put .hidden-xs on it. There is no need to do anything else. If you don't want it to show at the small min width add .hidden-xs .hidden-sm OR you can just add .visible-md .visible-lg
http://jsbin.com/AmaVUcib/1/edit
Put this in your css, preferably at the bottom. This will hide the sidebar for any screen less than 651px. Adjust the number of pixels to how you want.
#media screen (max-width: 650px) {
.well .sidebar-nav {
display: none;
}
}
Here's a link with more info https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
In bootstrap 4, use add the following classes to hide on xs and sm devices
.d-none .d-sm-none .d-md-block
Read more here
I'm new to CSS and am designing my first site from scratch using CSS (I've recently graduated from the for the love of God stop using html to style your websites way of life).
I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I've started the code but I'm stuck. The header will have a logo and the navigation (I haven't coded the navigation yet but that's not too hard) and the footer will simply have one line of content.
I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that's way more than what I want.
Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.
HTML
<body>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</div>
</body>
CSS
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
#header {
background: #636769;
}
#navigation {
}
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 16pt;
background: url(../images/texture.png);
}
#wrapper {
width: 938px;
margin: 0 auto;
padding: 20px 20px;
background: white;
}
#footer {
background: #636769;
}
If you want #header and #footer to span the entire page, you will also have to move them out of #wrapper. You may want to specify height too, e.g. height: 40px.
Do you want the header and footer to stay in place while scrolling? If so, use position: fixed; on both. Then, on #header put top: 0px; left: 0px; right: 0px;; and on #footer put bottom: 0px; left: 0px; right: 0px;.
Anything else that you want to do, let me know. I'd be glad to help.
Since your #wrapper class encompasses the entire page then all subsequent tags will inherit the same value. If you want the #header or #footer to ignore this, then you will need to specify a different value for those classes. Try and change these classes to specify their own width values (i.e. width: 938px;) and see what happens.
Pull the header and footer divs outside the wrapper to allow them to fit the width of the page.
<body>
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</body>