This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
twitter bootstrap, fluid vs fixed, then add in responsive, how does it all fit together?
Here is the demo of the design on which I am working
http://jsfiddle.net/U8HGz/1/show/#about
but this design is coming as fluid.. how can I make this design as fixed?
Below is the source for the page
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> web page</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<style type='text/css'>
body {
padding-bottom: 40px;
padding-top: 60px;
}
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid row">
<div class="span3">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="nav-header">Sidebar</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9 span-fixed-sidebar">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
</body>
</html>
You're using the container-fluid and row-fluid classes in your HTML.
The Bootstrap docs specifically explain how to use both the default and fluid grid systems; you want default, i.e. container and row.
Excerpt:
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.
Twitter bootstrap is meant to be responsive. If you want to change that you'll need to download the css and put it on your server for you to be able to modify it. After that go step by step and eliminate all that makes your site to resize. Like percentage width (other than 100%) and so on.
There's no easy solution to that.
Related
I'm using bootstrap 4, and I have a navbar at the top of the screen, fixed-top class, and it works completely fine, except when I link to something on the page.
So if I have an element that I target away down the page in one of the navbar links, using href="#introduction", the page will jump to that section, but the top of the targeted element will be cut off by the navbar. This only seems to happen when I target the element from a dropdown item. I've tried with a normal navbar link and didn't experience this behaviour.
See this fiddle to see what I mean - if you click on the dropdown button, then click "Introduction", you'll see how it's being cut off (cuts off the title of the jumbotron):
<nav class="navbar navbar-expand-md navbar-dark navbar-default sticky-top bg-dark">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Test</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#introduction">Introduction</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
<div class="jumbotron jumbostyle" id="introduction">
<h2>
Hello, world!
</h2>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
<div class="col-md-1">
</div>
</div>
</main>
Does anyone have any ideas how to solve this?
You can solve this issue by adding 3 or 4 <br> after
<div class="jumbotron jumbostyle" id="introduction">
This can solve the problem for now.
For the best practices you can check for each class style like jumbostyle to see what exactly casing this issue.
But you can just add 3 or 4 <br> and it will work fine.
Check this : Example
I assume you have control over the content displayed on the page. In that case you can give the content div with the target id #introduction a padding-top with the height of your navbar (about 100px).
<div class="jumbotron jumbostyle" id="introduction" style="padding-top:100px">
To make it even better, you could consider creating a custom class for this styles or using the bootstrap spacing utilities. Please do not add this styles to the #introduction tag!
Found the answer:
Instead of sticky-top, I used fixed-top, then added
body {
padding-top: 70px
}
to the CSS and
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
to the script.
See here: https://jsfiddle.net/ao3b0m95/
Edit: I don't think I need the CSS, just the JS will do the job.
I am working on an Angular (8.2.13) + Bootstrap (4.3.1) application able to display different pages, some of which have tabs and some other don't. I am facing various issues related to which part of the screen gets a scrollbar when content becomes larger than the screen.
If possible I would like to find a bootstrap-only solution to this problem (no extra CSS). If not, a solution that adds the least amount of extra CSS possible.
Here is the structure of the page:
Navbar
Should always be on the left of the screen (never move when scrolling on the content).
Uses the minimum possible width based on its content.
Uses the height of its container.
TabBar
Should always be at the top of the screen (never move when scrolling on the content).
Uses the minimum possible height based on its content.
Uses the width of its container.
Content
Should scroll vertically when height is higher than its container.
Uses all the remaining width and height in its container.
I made a minimal example to reproduce the issue:
Code Example
JSFiddle Exemple
HTML
<div class="d-flex h-100">
<nav class="navbar flex-column justify-content-start navbar-dark bg-dark h-100 overflow-auto flex-nowrap w-100">
<div class="navbar-nav">
<a class="nav-item nav-link pointer">Navbar</a>
</div>
</nav>
<div class="flex-grow-1 d-flex">
<div class="col overflow-auto p-3">
<div class="myContainer">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="flex-item">
<div class="row h-10">
<div class="col overflow-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expected behavior
On pages that do not have tabs, vertical scroll should happen when necessary on the right part of the screen (everything but the Navbar should scroll).
On pages that do have tabs, vertical scroll should happen when necessary on the container only (Navbar and TabBar should not move).
Observed behavior
Scroll works as intended when there is no tabs involved => OK.
Scroll applies to the right part of the screen when tabs are there too (meaning the TabBar dissapear when you scroll down) => NOK.
Things I tried that did not work / are not acceptable
Setting height: 80vh; (or any other fixed height) on <div class="col overflow-auto"> did work in my application, but it loses the dynamic vertical size on the content and is not bootstrap only (Dynamic vertical size is needed because the TabBar can change height dynamically).
According to this topic, setting min-height: 0; on every parent tag of the one supposed to scroll using flex behavior should do the trick. It did not work in my case, plus it is not bootstrap only.
EDIT: Updated bootstrap version in JSFiddle example to match the version used in my application.
Try this
body {
overflow: hidden;
}
.inner {
overflow-y: scroll;
height: 100vh;
padding-bottom: 130px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<nav class="navbar flex-column justify-content-start navbar-dark bg-dark overflow-auto flex-nowrap">
<div class="navbar-nav" style="height: 100vh;">
<a class="nav-item nav-link pointer">Navbar</a>
</div>
</nav>
<div class="flex-grow-1 d-flex">
<div class="col overflow-auto p-3">
<!-- Here the container can be replaced by several others based on elements selected in the Navbar. For simple container the "overflow-auto" of the parent div is required to get the appropriate vertical scroll. Also in my application this "overflow-auto" allows to scroll vertically in this block only, but in this example the scroll is on the whole page (navbar on the left moved when scrolling, but it should be static) -->
<div class="myContainer">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="flex-item">
<div class="row">
<!-- I wish for vertical scroll to happen on the following col and not at the "myContainer" level. I also want the content of one tab to take all remaining space on screen. So forcing the height on this col with style="height: 85vh" does work, but is not what I am looking for. -->
<div class="col overflow-auto inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After discussion with other people we came up with a satisfying solution for this problem:
Code Example
JSFiddle example
HTML
<body style="height: 100vh;">
<div id="app-container" class="d-inline-flex h-100 justify-content-stretch">
<nav class="navbar justify-content-start navbar-dark bg-dark">
<div class="navbar-nav">
<a class="nav-item nav-link pointer">Navbar</a>
</div>
</nav>
<div class="d-flex">
<div class="col p-3">
<div class="myContainer h-100 d-flex flex-column">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link">Tab 3</a>
</li>
</ul>
<div class="tab-content flex-grow-1 overflow-auto">
<div class="tab-pane active">
<div class="flex-item">
<div class="row h-10">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You can an example of this at https://www.wiseguypizza.com/ . As you can see their layout is
image
content
image
content
image
content.
As you scroll down it appears the first image you are leaving is being covered by the content and as you continue scrolling it appears that the next image you see is being uncovered as you leave the content. What CSS properties are used to achieve this?
What you want to achieve is a parallax effect.
You can use a simple framework to achieve it, in order to simplify the process.
Here you can find a simple page with the effect you need.
I used Materialize, you just have to import JS and CSS (in your source code or from the CDN).
Here's the working Codepen.
Here's the code, you have to add the classes "parallax-container" and "parallax" to the containers that wraps the image you want to move on page scroll and the framework will do the rest!
<div class="parallax-container">
<div class="parallax">
<img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1">
</div>
</div>
Here's the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Parallax Page Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li>Navbar Link #1</li>
<li>Navbar Link #2</li>
<li>Navbar Link #3</li>
<li>Navbar Link #4</li>
<li>Navbar Link #5</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send green-text"></i></h3>
<h4>Section Title</h4>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1496088285923-2bcbf1ba3f62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Unsplashed background img 2"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send green-text"></i></h3>
<h4>Section Title</h4>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="https://images.unsplash.com/photo-1545960696-624e0d91b52b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" alt="Unsplashed background img 3"></div>
</div>
<footer class="black">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Title</h5>
<p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Title</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Title</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© Copyright
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
(function($){
$(function(){
$('.parallax').parallax();
});
})(jQuery);
</script>
</body>
</html>
Hope this helps!
I have a template that generates links to other pages in my site, but these generated links are incorrect.
For example the home link is http://127.0.0.1:8080/silverstripe/"/silverstripe/"
It should be http://127.0.0.1:8080/silverstripe/
Why are my links wrong?
Here is my template code:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<% base_tag %>
$MetaTags
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Google Web Font -->
<link href="http://fonts.googleapis.com/css?family=Raleway:300,500,900%7COpen+Sans:400,700,400italic" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link href="$ThemeDir/css/bootstrap.min.css" rel="stylesheet" />
<!-- Template CSS -->
<link href="$ThemeDir/css/style.css" rel="stylesheet" />
<!-- Modernizr -->
<script src="$ThemeDir/js/common/modernizr.js"></script>
</head>
<body>
<!-- BEGIN WRAPPER -->
<div id="wrapper">
<!-- BEGIN HEADER -->
<header id="header">
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-buttons">
<li><i class="fa fa-sign-in"></i> Login</li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
<li class="divider"></li>
<li>
<div class="language-switcher">
<span><i class="fa fa-globe"></i> English</span>
<ul>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Português</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="nav-section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="$ThemeDir/images/logo.png" alt="One Ring Rentals" />
<!-- BEGIN MAIN MENU -->
<nav class="navbar">
<button id="nav-mobile-btn"><i class="fa fa-bars"></i></button>
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class=”$LinkingMode” href=”$Link” title=”Go to the $Title page”>$MenuTitle</a></li>
<% end_loop %>
</ul>
</nav>
<!-- END MAIN MENU -->
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-title">$Title</h1>
<div class="breadcrumb">
$Breadcrumbs
</div>
</div>
</div>
</div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN CONTENT -->
<div class="content">
<div class="container">
<div class="row">
<div class="main col-sm-8">
<h1 class="section-title">Nunc enim nulla</h1>
<p class="darker-text">Donec magna justo, laoreet sed consectetur non, malesuada non neque. Aenean vehicula vitae dui eu convallis. Cras a venenatis urna, ac congue nulla.</p>
<p>Donec ex sapien, semper sit amet sodales suscipit, imperdiet in metus. Aliquam maximus mi eget finibus cursus. Duis a nisi tempus, porta eros sit amet, placerat urna. Vivamus varius enim ut sem imperdiet lacinia. Cras sed mauris ac felis rhoncus sodales sit amet eget ante. In metus purus, tristique a porttitor ac, sollicitudin vitae arcu. Quisque ac vehicula nulla. Morbi finibus facilisis cursus. Praesent sollicitudin sem id fermentum dignissim. Donec dictum dui a accumsan finibus. Quisque velit purus, lobortis et aliquam sit amet, sagittis eget lorem. Integer ut elit nisi.</p>
<p>Ut vel facilisis leo. Cras feugiat dolor faucibus, porttitor nisl euismod, tempus tellus. Donec varius cursus velit eu aliquam. Nulla facilisi. Pellentesque sit amet nunc nisl. Suspendisse tortor dolor, sagittis vel mattis vel, commodo eu metus. Proin a hendrerit mi. Sed blandit ante mi, nec elementum lacus elementum in. Quisque at risus nunc. Vestibulum quis diam id massa sodales viverra sit amet et nulla. Quisque commodo faucibus dignissim. Ut eros neque, tristique tincidunt sapien non, fermentum elementum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Phasellus pellentesque metus neque, quis consequat neque hendrerit eget. Vestibulum nunc mauris, venenatis id mi et, ornare consectetur nisl. Nunc molestie sem tempor ante mattis, et consectetur dolor ornare. In congue elit gravida nisi semper gravida. Maecenas posuere mollis ligula, quis malesuada elit pretium vitae. Nulla aliquam eget justo sollicitudin fermentum. Nunc ac justo at arcu aliquet iaculis non non lacus. In nisi tellus, mollis nec volutpat nec, sagittis ac neque. Sed in aliquam risus. Sed in tristique nisl. Ut in tellus non neque pellentesque venenatis eget sed risus. Nulla facilisi. Duis efficitur velit nunc, et mattis enim dictum vitae. Integer tincidunt quam quis vulputate tempor. Donec sagittis tortor vitae consectetur sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="sidebar gray col-sm-4">
<h2 class="section-title">In this section</h2>
<ul class="categories subnav">
<li>Company</li>
<li>FAQ</li>
<li>Careers</li>
<li>Contact Us</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- BEGIN FOOTER -->
<footer id="footer">
<div id="footer-top" class="container">
<div class="row">
<div class="block col-sm-3">
<img src="$ThemeDir/images/logo.png" alt="One Ring Rentals" />
<br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo eros nibh, et dictum elit tincidunt eget. Pellentesque volutpat quam dignissim, convallis elit id, efficitur sem. Vivamus ac scelerisque sem. Aliquam sed enim rutrum nibh gravida pellentesque nec at metus. In hac habitasse platea dictumst. Etiam in rhoncus mi. In hac habitasse platea dictumst. Mauris congue blandit venenatis.</p>
</div>
<div class="block col-sm-3">
<h3>Helpful Links</h3>
<ul class="footer-links">
<li>All rentals</li>
<li>List your rental</li>
<li>Read our FAQs</li>
</ul>
</div>
<div class="block col-sm-6">
<h3>Popular regions</h3>
<div class="row">
<div class="col-sm-6">
<ul class="footer-listings">
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Rhovanion</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Eriador</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Bay of Belfalas</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="footer-listings">
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Mordor</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Arnor</p>
</li>
<li>
<div class="image">
<img src="http://placehold.it/760x670" alt="" />
</div>
<p>Forlindon</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN COPYRIGHT -->
<div id="copyright">
<div class="container">
<div class="row">
<div class="col-sm-12">
© 2014 One Ring Rentals
<!-- BEGIN SOCIAL NETWORKS -->
<ul class="social-networks">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
<!-- END SOCIAL NETWORKS -->
</div>
</div>
</div>
</div>
<!-- END COPYRIGHT -->
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER -->
<script type="text/javascript" src="$ThemeDir/js/common/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/chosen.min.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/bootstrap-checkbox.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/nice-scroll.js"></script>
<script type="text/javascript" src="$ThemeDir/js/common/jquery-browser.js"></script>
<script type="text/javascript" src="$ThemeDir/js/scripts.js"></script>
</body>
</html>
The problem is the type of double quote character being used in these links:
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class=”$LinkingMode” href=”$Link” title=”Go to the $Title page”>$MenuTitle</a></li>
<% end_loop %>
</ul>
You will notice your link attributes have ” quotes instead of " quotes.
The double quote character must be ".
Try this:
<ul class="nav navbar-nav">
<% loop $Menu(1) %>
<li><a class="$LinkingMode" href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
<% end_loop %>
</ul>
i have a server with nginx + spdy + module_pagespeed installed and i'm making page speed test from google.
This is my current template for the test which obtain 76/100, a basic template with only bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome!</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I obtain 76/100 and an alert that say render blocking,
page speed test
When i remove the bootstrap.min.css i get 100/100, ¿is there any way to fix this issue?
Regards,
You only seem to have an issue in the mobile test and not the desktop version. Google has different guidelines for the different cases since usually the mobile connection is slower, less content is shown (which means not as much CSS is needed) and so on.
Some things I’d look into:
Is your version of Bootstrap the complete Bootstrap? Try to only include the parts that you actually need. In 90% of the cases there is something you can remove.
Does your mobile site need exactly the same CSS as the desktop version? Try to identify elements that you maybe don’t even use on smaller screens and ship a seperate file that you use only on small screens (and don’t use the big one)
If you use the mod_pagespeed module (either on Apache or NGINX) there is a setting to dynamically inline certain parts of the CSS into the <head> which is what Google recommends you do for big stylesheets. I haven’t used this setting yet though so I can’t provide any help there.
Hope that helps.