I have two background images day.png and night.png. I want to display background image depending on the time of day.
This is the cshtml view:
<body>
<header >
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#Url.Action("Index", "Home")"><img
src="~/images//logo.png"></a>
</div>
<button type="button" data-toggle="collapse" data
target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
</div>
</div>
</header>
</body>
This is the CSS:
header
{
background-image: url(../images/day.jpg)
height: 120vh
background-size: cover
background-position: center
}
Would like to implement this into cshtml page:
DateTime currentTime = DateTime.Now;
if (currentTime.Hour < 5pm)
{
// use image/day.png
}
else
{
// use image/night.png
}
Related
I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I am using a free Bootstrap landing page theme, on my current site the code snippet and be run from below, which gives the desired effect on Chrome with Parallax and images. But, there are two issues which I am not able to figure out the reason for:
1.[Solved] In IE, all the sections of the page are displaying fine and Parallax works, but the content for those section is just all displaying on 1st section.
Solution : The v-center class , was causing this issue as pointed by #Fester . Removed it from the markup, and issue fixed but no solution found yet.
Un - Solved Issue
On iOS, the background image is scaled to much and just a bit from the center is displayed. Works fine on iMac, not on iPhone or iPad.
Please bear in mind I am new to CSS and trying to work my way thru, and have tried a few things suggested on different questions for the iOS issue but it does not work. The CSS is not minified, so can be easily viewed.
PS: I know, I need to try something first before asking the question but being a developer not a clue on where to start. Even a bit of pointer will be much appreciated.
Edit 1: Tried modernizr with HTML5shiv but still giving the same issue. Just included the modernizr and HTML5shiv js file. No changes were made to the code.
EDIT 2: The Issue with IE was caused by v-center class. Removed it, and everything fine. But, now actual reason or solution found.
Code is As Below:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 52
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 800);
if (this.hash=="#section1") {
$('.scroll-up').hide();
}
else {
$('.scroll-up').show();
}
// activte animations in this section
target.find('.animate').delay(1200).addClass("animated");
setTimeout(function(){
target.find('.animated').removeClass("animated");
},2000);
return false;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:300,400);
#import url(http://fonts.googleapis.com/css?family=Bitter:400);
html,body {
height:100%;
background:center no-repeat fixed url('http://dd.e-wizardbathrooms.co.uk/background.jpg');
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
color:#444;
font-family: 'Lato', sans-serif;
}
#media (min-width:768px) {
h1 {
font-size:68px;
}
}
a {
color:#999;
}
a:hover {
color:#111;
}
.btn,.well,.panel {
border-radius:0;
}
.btn-danger {
background-color:#f44d3c;
}
.btn-main {
color: #ffffff !important;
border-radius: 10px;
background-color: rgba(244,77,60,0.7);
padding-bottom: 10px;
}
.text-danger, a.text-danger {
color:#f44d3c;
}
.btn-huge {
padding:17px 22px;
font-size:22px;
}
.lato {
font-family: 'Lato', sans-serif;
}
.bitter {
font-family: 'Bitter', serif;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#273a60;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#cdcdcd;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#f44d3c;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#f44d3c;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:1px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 40px;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: -15px;
display: block;
padding: 7px;
text-align: center;
z-index:-1
}
.scroll-up {
position: fixed;
display: none;
z-index: 999;
bottom: 2em;
right: 2em;
}
.scroll-up a {
background-color: rgba(135, 135, 135, 0.5);
display: block;
width: 35px;
height: 35px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 30px;
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
min-height:calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#media (min-width:768px) {
.v-center {
height: 50%;
overflow: visible;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#section1, #section3 {
background-color: rgba(0,0,0,0.3);
color:#fff;
font-family: 'Bitter', serif;
}
#section4 {
background-color: #f6f6f6;
color:#444;
}
#section2 {
background-color: #fff;
}
#section3 {
background-color: rgba(0,0,0,0.9);
}
#section5 {
background-color: #fff;
}
#section6 {
background-color: #eee;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
#section7 {
background-color: #273a60;
color: #f6f6f6;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
footer {
background-color:#2b2b2b;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding: 3px;
color: #f44d3c;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>David Dixon Garden Machinery</title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="#">David Dixon</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><strong>Phone: </strong>01434-606060</li>
<li><strong>E-Mail:</strong>info#daviddixons.co.uk</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">David Dixon</h1>
<h2 class="text-center lato animate slideInDown"><b>Garden Machinery</b></h2>
<h4 class="text-center lato animate slideInDown">Please Select one of the Following or Scroll Down for More Info.</h4>
<p class="text-center">
<br>
Online Shop
Servicing & Parts
Equipment Hire
</p>
</div>
<a href="#section2">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section class="container-fluid" id="section2">
<div class="container v-center">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInLeft animate">
<div class="panel-heading">
<h3>Online Shop</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInUp animate">
<div class="panel-heading">
<h3>Servicing & Parts</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInRight animate">
<div class="panel-heading">
<h3>Equipment Hire</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/row-->
<div class="row">
<br>
</div>
</div>
<a href="#section3">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
<!--/container-->
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">David Dixon</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center lato slideInUp animate">The Best for <strong>Garden and Forest Machinery</strong> in the North East.</h3>
<br>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Additional Information about David Dixon Company and History</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Additional Information about David Dixon Company and History</div>
</div>
<br>
<p class="text-center">
<img src="//placehold.it/10x10/444/FFF" class="img-responsive thumbnail center-block ">
</p>
</div>
</div>
<h3 class="text-center">Brands we Work with</h3>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<a href="#section4">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section id="section4">
<div class="container v-center">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact US</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row form-group">
<div class="col-sm-5">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Message" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<button class="btn btn-default btn-lg pull-right">Send Message</button>
</div>
</div>
</div>
<div class="col-sm-3">
<address>
<strong>Opening Hours:</strong><br>
Monday to Friday: 8am - 5pm<br>
Saturday: 8.30am - 12.30pm<br>
</address>
<address>
<strong>Phone: </strong>01434-606060
</address>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>David Dixon Ltd.</strong><br>
18, Haugh Lane Industrial Estate<br>
Hexham, Norhtumberland<br>
United Kingdom - NE46 3PU<br>
</address>
<address>
<strong>Email Us</strong><br>
info#daviddixons.co.uk
</address>
</div>
</div>
<div class="row">
<div class="row"> </div>
<a href="#">
<div class="col-sm-2 col-sm-offset-3 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
</a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<!--/row-->
<p class="text-center">David Dixons Ltd. ® 2015</p>
</div>
</footer>
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
i.e. i want the menuitems to be full width.
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
I've hacked an example from a default bootstrap template below.
jsbin example
Default template
Default template's in mobile with vertically stacked menu
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
So if you have two navbars like so:
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li>Manage Members</li>
<li>Add a new Member</li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li>Home</li>
<li>Contact Us</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
/* CSS used here will be applied after bootstrap.css */
#media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
#media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
#media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
Bootply here
Here is my layout code, I'm using Bootstrap v3.0 and Using ASP.NET MVC. The page has to be responsive, I tried using "space-20" just below the render body content, it works but it doesn't work on small screens. I'm an absolute beginner in ASP.NET MVC
<div class="navbar navbar-fixed-top">
<div class="navbar-inner clearfix">
<div class="container">
#Html.ActionLink("Grikwa Store", "Index", "Home", null, new { #class = "navbar-brand clearfix" })
<div class="navbar-left">
#Html.Partial("_SearchPartial")
</div>
</div>
</div>
<div class="navbar-inner navbar-inverse" style="background-color: #68217a;">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("Admin", "Admin", "Account")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
You just need to add some padding to your body-content class.
.body-content {
padding-top: 36px; /* choose whatever you want here */
}
This happens because you have your navbar set to fixed, which is taken out of the normal flow.
When I run this the image and carousel overflow and you have to scroll down on the page to see the bottom of image and 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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src= "/assets/run3.jpg" width = "100%" alt="photo">
<div class="carousel-caption">
<h3>Sign Up Now!</h3>
<p>This is Where amazing happens</p>
</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>
here is what happens: dropbox.com/sh/tdo3928f453123h/jTbquZNM37
You can force your slider & image width and height :
#carousel-example-generic,
#carousel-example-generic .item,
#carousel-example-generic .item img {
height: 100%;
}
#carousel-example-generic .item img {
width: 100%;
}
Bootply
Note : this won't keep proportions, but it could fit your needs.