I would like to make one page scroll. Nav bar. Then a full width picture. than about me page, porfolio / projects and contact me. But it seems like am doing something wrong with the layout. Please help.
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
.fixed-bg {
/* The background image */
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478095932/DeathtoStock_Lonely_Commute-05_ricqva.jpg");
/* Scale the background image to be as large as possible */
background-size: cover;
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<html>
<head>
</head>
<body>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01">
<img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About
</li>
<li id="btnhome">Portfolio
</li>
<li id="btnhome">Contact
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="fixed-bg">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h1 class="text-center">1.4.1.3</h1>
<p>fafafa</p>
<div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h1>Code</h1>
</div>
</div>
</body>
</html>
Related
HTML:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron jumbotron-fluid vertical-center">
<div class="container">
<h1 class="display-3">TITLE</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>Description text</p>
<p class="lead">
<a class="btn btn-primary btn-lg btn-jumbotron" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
</div> <!-- /container -->
CSS:
.navbar{
padding: 7px 0;
margin-bottom: 0;
}
.jumbotron {
background-image: url(http://cdn.wallpapersafari.com/97/93/UE7u4i.jpg);
background-size: cover;
color: white;
margin: 0;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.btn-jumbotron{
background-color: black;
border-color: white;
}
I'm trying to have a jumbotron have full height of the browser's window, but without the height of the static navbar. I did get it to size of full viewport by using height: min-height:100vh amnd center it, but as you can see from the jsfiddle example I have a scrollbar present because of the navbar's height - 64px.
How can I remove that?
https://jsfiddle.net/iDaniel19/12qxmkjt/
Use calc
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
min-height: calc(100% - 64px); /* */
min-height: calc(100vh - 64px); /* */
display: flex;
align-items: center;
}
Add to .navbar position: absolute; top: 0; width: 100%; and padding-top:64px; to .jumbotron
I'm doing the web developer course at FreeCodeCamp, and I'm stuck on the task in which I need to make my own portfolio webpage. It needs to be a single-page scroll style webpage with 3 or more sections which can be accessed from the nav bar or by scrolling. So far, I have created a basic layout and have gotten (almost) everything to work. However, someone said that the webpage wasn't properly scaled for higher res screens.
Now, to fix that, I set width and height to 100% for all images in my CSS file. I've used 1920x1080 images, so I assume that might be the issue. Correct me if I'm wrong, but I think using .svg images should help with that. However, that only relates to the images and on desktop. On mobile, the webpage looks very bad and some of the text is covered by the navbar.
So, how would I go about fixing that? I am a beginner, so please excuse me if this is a very basic question.
My code:
$(document).ready(function(){
$('.nav li a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 750);
return false;
}
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#import url('https://fonts.googleapis.com/css?family=Oswald');
body {
padding-top: 70px;
}
.hello {
padding-top: 70px;
background-image: url("https://images3.alphacoders.com/853/85305.jpg");
background-repeat: no-repeat;
min-height:100%;
min-width:100%;
background-attachment: fixed;
padding-bottom: 100%;
}
.hello h1 {
font-family: Oswald;
text-align: center;
color: white;
font-size: 125px;
}
.hello h3 {
font-family: Oswald;
text-align: center;
color: white;
}
.hello h5 {
font-family: Oswald;
text-align: center;
color: white;
}
.jumbotron {
background-color: grey;
}
#projects {
background-image: url("http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-heavenly-landscape-photography-magazine-pdf-landscape-wildlife-photography-magazine-landscape-photography-magazine-uk-the-landscape-photography-magazine-essential-guide-to-lan.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:100%;
min-width:100%;
padding-top:100px;
padding-bottom:100%;
}
#projects h2 {
color: #f2f2f2;
font-family: monospace;
text-align: center;
font-size: 15px;
}
.placeholder1 {
padding-left: 150px;
align: left;
}
.placeholder2 {
padding-right: 150px;
align: center;
}
.placeholder3 {
padding-right: 150px;
align: right;
}
#about {
background-image: url("https://i.ytimg.com/vi/n-9ZLWnFbOI/maxresdefault.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:1000px;
width: 100%;
padding-top: 30px;
}
.infoLeft {
color: white;
font-family: Oswald;
padding-left: 17px;
text-align: left;
}
.infoRight {
color: #000;
font-family: Oswald;
padding-right: 17px;
text-align: right;
}
.infoCenter {
color: #000;
font-family: monospace;
text-align: center;
padding-top: 25px;
font-size: 15px;
}
#contact {
background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463674617/full_hd_nature_wallpapers_1080p_desktop_river_and_autumn_forest_d1dest.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
width: 100%;
padding-bottom: 100%;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="hello" id="home">
<h1></h1>
<h1></h1>
<h1>Hello.</h1>
<div class="jumbotron">
<h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
<h5>You can navigate through the webpage using the four hyperlinks, or you can scroll.</h5>
</div> <!-- end Jumbotron -->
</div> <!-- end Home -->
<div id="projects">
<h2>This area will be updated with a list of all my projects. This is my first one.</h2>
<div class="row">
<div class="col-xs-6 col-md-3 placeholder1">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder1 -->
<div class ="col-xs-6 col-md-3 placeholder2">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder2 -->
<div class ="col-xs-6 col-md-3 placeholder3">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder3 -->
</div>
</div> <!-- end Projects -->
<div id="about">
<div class="infoLeft">
<h1>About Me:</h1>
</div> <!-- end infoLeft -->
<div class="infoRight">
<h4>I am a teen who loves everything with an engine and is fascinated by technology.</h4>
<h4>I just got done with A Levels and am enjoying the freedom!</h4>
</div> <!-- end infoRight -->
<div class="infoCenter">
<h3>Scroll down or click on Contact on the navigation bar to see the contact options.</h3>
</div> <!-- end infoCenter -->
</div> <!-- end About -->
<div id="contact">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</div> <!-- end Contact -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
This project's CodePen link: http://codepen.io/AnInternetUser/pen/zqVZBL?editors=0010
Try to make your navbar collapsible (and toggleable) in mobile views.
add bootstrap.min.js
change the HTML-code for toggle button by <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
wrap <ul class="nav" ... into <div id="navbar" class="navbar-collapse collapse">
That's my code for your navbar:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
http://codepen.io/glebkema/pen/GZbaWE
I'm building a site in BootStrap and my scroll disapepeared completely. I now can't scroll up and down. Why is that? I already tried overflow, overflow-y, but I don't understand what I'm doing wrong.
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
</div>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code {
font-size: 80%;
}
.jumbotron {
background-image:url('http://tomodom.com/wp-content/uploads/2013/07/Persona4Golden_Hero.jpg');
height:400px
}
The Div with the fixed position called "" doesn't close until after the page content, which is located just before the div with the id of Footer. Instead it should finish at the end of the nav section.
Copy this.
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
I am trying to create a layout where I have a header (nav) of fixed height in px, a footer of fixed px as well and a div in between them that occupies the remaining space.
Broken Demo: http://jsfiddle.net/murid/0vcyqm3y/
What I'm trying to achieve is for that blue div to go all the way down to the footer. Keeping in mind that I'm using a "push" div to get the footer to sit at the bottom of the page in case the content of the page is short and that said content can be very long as well therefore pushing the footer down.
I've checked out similar questions on Stackoverflow but answers involve position absolute, JavaScript, or background color on the body, I'm trying to avoid all of these and have a simple CSS only solution with background color on the content div.
I'm using Bootstrap btw.
CSS and HTML:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
}
nav.navbar {
margin-bottom: 0;
}
section {
padding: 10px 0;
margin-left: -15px;
margin-right: -15px;
}
.section-primary {
background: #337ab7;
}
section > .row {
margin-left: 0;
margin-right: 0;
}
footer,
.push {
height: 50px;
}
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<section class="section-md section-primary">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
Panel Body
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="push"></div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>
I have to say I'm not a fan of this.. but this is the only CSS solution I know..
http://codepen.io/pacMakaveli/pen/EjWXNw?editors=110
Otherwise, for a cleaner way, use flexbox.
html,
body {
height: 100%;
}
#wrap {
height: 100%;
display: table;
width: 100%;
border: 2px solid green;
}
#wrap > nav,
footer {
display: table-row;
}
nav.navbar {
margin-bottom: 0;
}
section {
padding: 10px 0;
margin-left: -15px;
margin-right: -15px;
}
.section-primary {
background: #337ab7;
}
.content {
border: 3px solid red;
display: table-cell;
height: 100%;
}
section > .row {
margin-left: 0;
margin-right: 0;
}
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<section class="section-md section-primary">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
Panel Body
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>
</div>
I have a simple map site with a sidebar that I can toggle on and off. All works fine on Pc and telephone, but I can't get the responsive navbar functionality to work on a tablet.
Here is the css:
html, body { height: 100%; }
body {
padding-top: 50px;
}
.container-fluid {
margin: 0;
padding: 0;
height:100%;
width: 100%;
}
.map{
width:100%;
height:100%;
}
.sidebar {
position: absolute;
top: 0px;
left: 0px;
height: inherit;
width: 30%;
z-index: 10005;
background-color: #fff;
overflow-y: scroll;
padding-top: 50px;
display: none;
}
/*
* iPad - nav list not complete
*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.sidebar {
width: 40%;
}
}
/*
* Phone - works
*/
#media (max-width: 767px) {
.sidebar {
width: 100%;
}
}
and the html:
<!-- form container -->
<div class="container sidebar" id="form-container">
<nav class="navbar navbar-fixed-top navbar-inverse sidebar-header" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#form-container-navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="form-container-title" class="navbar-brand" href="#">Form</a>
</div><!-- /navbar-header -->
<div id="form-container-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav ">
<li>Open</li>
<li>Maybe</li>
<li>Whatever</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li><a id="close-form" href="#">Close</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- container -->
</nav><!-- navbar -->
<form role="form" id="form1">
<div class="form-group">
<label for="species">Species</label>
<input id="species" class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="risk">Risk</label>
<!-- etc, etc -->
On a pc I get a horizontal menu that extends beyond the 'sidebar'. This is fine.
On a phone I get the collapsed menu that I can toggle - also fine.
But on an iPad I get a horizontal menu that works, but I can't see the text that is beyond the width of the .sidebar. Unhelpful.
Ideally I'd get the collapsed menu I can toggle, or a horizontal menu I can see!
Can anyone help?
Thanks
Mini