I'm trying to create a fixed-left sidebar following the Bootstrap 5 Sidebar examples and I almost have everything setup correctly. My requirements are:
Sidebar needs to be fixed
Main content needs to be vertically and horizontally-centered
footer-info needs to be fixed at the bottom
Two problems I have are
the main content jumps below the Sidebar when the screen gets too small. I would like to force the Sidebar and Main content remain side-by-side and have an x-axis scroll appear if need be while maintaining the Main content to be centered.
I'm having a hard time centering my main content.
Included is my work in progress
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>
{% block title %} BRAND NAME {% endblock title %}
</title>
</head>
<style>
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
main {
display: flex;
flex-wrap: nowrap;
height: 100vh;
height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.sidebar {
background-color: #adb5bd;
}
.sidebar .nav a:hover,
.sidebar .nav a:focus {
background-color: #dc3545;
}
.btn-toggle {
display: inline-flex;
align-items: center;
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
background-color: transparent;
border: 0;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
transition: transform .35s ease;
transform-origin: .5em 50%;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
display: inline-flex;
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 2rem;
text-decoration: none;
color: white;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #dc3545;
color: white;
}
.login-menu {
padding: 2rem 1rem;
width: 250px;
}
</style>
<body>
<div class="container-fluid overflow-hidden">
<div class="row vh-100 overflow-auto">
<div class="sidebar d-flex flex-column flex-shrink-0 p-3" style="width: 240px;">
<a href="#" class="navbar-brand d-flex align-items-center mb-3">
BRAND NAME
</a>
<ul class="nav nav-pills flex-column mb-auto">
<li class="mb-1">
<a class="btn btn-toggle d-flex align-items-center rounded collapsed text-white" data-bs-toggle="collapse" data-bs-target="#csd-menu">
<span class="mif-books mif-3x ms-1 me-2"></span> Create New...
</a>
<div class="collapse" id="csd-menu">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>Site</li>
<li>System</li>
<li>CSD</li>
<li>Circuit</li>
</ul>
</div>
</li>
<li class="mb-1">
<a class="btn d-flex align-items-center rounded text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="30" fill="currentColor" class="bi bi-diagram-3 me-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
</svg> Systems
</a>
</li>
</ul>
<hr>
<div class="nav-link dropdown">
<a href="#" class="d-flex align-items-center text-danger text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
<h3>
<strong>
Login
</strong>
</h3>
</a>
<div class="dropdown-menu login-menu bg-secondary text-white shadow">
<form action='/users/login_user/' method='POST' id="form-login-user">
<div class="mb-1">
<input type="username" class="form-control" id="username" placeholder="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<ul class="nav nav-pills flex-column">
<li class="mb-1">
<a class="btn d-flex align-items-center rounded text-white">
Documentation
</a>
</li>
<li class="mb-1">
<a class="btn d-flex align-items-center rounded text-white">
Help
</a>
</li>
</ul>
</div>
<div class="col d-flex flex-column h-sm-100">
<main class="row overflow-auto">
<div class="col">
<h1 class="display-3 text-center">
Circuits
</h1>
<div class="d-flex justify-content-center">
<form class="loading" action="/search/" method="get">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
</div>
</div>
</main>
<footer class="footer row mt-auto align-items-end justify-content-end text-muted">
<div class="col"></div>
<div class="col-auto text-center">
Powered by
<img src="{% static 'images/gloo_logo.png' %}" class="rounded my-2" alt="GLOO">
</div>
<div class="col text-end me-4">
<div>
version: [version_number]
</div>
</div>
</footer>
<br>
</div>
</div>
</div>
{% csrf_token %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Try this as "Bootstrap 5 sidebar Example"
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
<div class="header_img"> <img src="https://i.imgur.com/hczKIze.jpg" alt=""> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list">
<i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span>
<i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span>
<i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span>
<i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span>
<i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span>
<i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span>
</div>
</div>
<i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
Its running code is here https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202#
Ok, seems I was able to resolve issue 1 where the main content would want to stack below the sidebar if the window became too small. Looking at the Bootstrap Flex Utilities I was able to utilize a .flex-row and .flex-column.flex-grow-1 combination. The Sidebar remains fixed even when I add a bunch of content to the right-side.
I am still having difficulty centering my search form while making my footer rest at the bottom. I have tried two different setups and each resolves part of my problem creating another problem:
I can add a .justify-content-center to my flex-column to make my form vertically-centered but my footer will want to be placed centered as well. Here is this example.
I can add a .mt-auto to my footer but then my search form want to be placed at the top of the page. Here is this example.
Related
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
I have made a responsive flexbox grid. It works in Chrome, but not in Safari and IOS. I must be missing something. Can anyone tell me what I'm doing wrong?
codepen
section {
max-width: 1280px;
display: block;
margin: 0 auto;
}
section:not(.grid) {
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
}
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}
Remove this enclosing element from your SCSS, but keep everything inside it:
section:not(.grid) {}
it means those flex styles will NOT be applied.
section {
max-width: 1280px;
display: block;
margin: 0 auto;
border: 1px dashed red;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
border: 1px dashed blue;
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}
<section class="grid">
<h4>All projects</h4>
<div class="wrapper">
<div class="box">
<h5>Project 1<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 2<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 3<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 4<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 5<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 6<br>
<span>Category</span>
</h5>
</div>
</div>
</section>
I am using a standard bootstrap 3 navbar and I am trying to align the text of the menu options to be on the same horizontal level as the text and the pictures in the footer.
Basically on the left side I want the first letter of the menu item "Home" to be vertically aligned with the first letter of the footer, which is the item "Impressum".
On the right side I want the image of the footer to be aligned to the last item of the menu, which is contact.
Any help would be highly appreciated.
here is my code:
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>COLLECTION</li>
<li>ONLINE SHOP</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
<hr>
</div><!-- /.container-fluid -->
</nav>
<!-- Footer -->
<div id="footer">
<div class="row">
<hr>
<div class="col-lg-6 col-lg-offset-1 col-xs-6">
IMPRESSUM |
INFO |
PRESSE </p>
</div>
<div class="col-lg-1 col-xs-2">
<img src="img/pinterest.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/instagram.png" alt="" class="img-responsive"> </div>
<div class="col-lg-1 col-xs-2">
<img src="img/facebook.png" alt="" class="img-responsive"> </div>
</div>
<!-- /.row -->
</div>
And here is my CSS:
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
https://jsfiddle.net/DTcHh/9901/
I think you should set your css according to your layout, So far i made some alteration in your css check this code
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width:100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: block;
float: left;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 48px;
width:15px;
}
#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
So, let me tell my problem directly to the point. I'm developing a website right now. And so I try to visit this website I'm developing on with my iphone. The problem is, I got some different output when I visit that site with my PC and when I visit it with my iphone. This image is when I visit it with my PC's Chrome and the output is just the same with all other browser in my PC while this is when I visit it with my iphone's Safari and so the output is same too when I visit it with my iphone's Chrome . See the difference betwwem visit from iphone and from PC? Yep. I got that "space" above my navigation bar while visiting it with my iphone. So can anybody help me solve this problem? Thanks a lot in advance.
Btw this is my CSS and HTML
body {
background: rgb(25, 181, 254);
margin: 0px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header {
width: 100%;
min-width: 1050px;
height: 150px;
margin-bottom: 20px;
text-align: center;
}
#logoBox {
display: inline-block;
width: 300px;
height: 150px;
overflow: hidden;
}
#logoBox:active {
height: 140px;
margin: 5px auto;
}
.logo {
background: url('img/icon/logo.png') no-repeat;
width: 300px;
height: 100%;
}
#navBox {
width: 150px;
height: 150px;
overflow: hidden;
display: inline-block;
}
.transition {
transition: height 0.15s, margin 0.15s, background 0.7s;
-webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
-o-transition: height 0.15s, margin 0.15s, background 0.7s;
-ms-transition: height 0.15s, margin 0.15s, background 0.7s;
-moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
height: 140px;
margin-bottom: 5px;
}
#navBox.green {
background: rgb(80, 190, 106);
}
#navBox.orange {
background: rgb(250, 170, 30);
}
#navBox.green:hover {
background: rgb(4, 160, 114);
}
#navBox.orange:hover {
background: rgb(240, 130, 20);
}
#iconBox {
height: 53.4%;
width: 100%;
margin-top: 13.4%;
text-align: center;
}
#iconBorder {
width: 70px;
height: 70px;
border-radius: 40px;
border: 5px solid rgb(255, 255, 255);
}
img.icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
a.nav {
display: inline-block;
text-decoration: none;
}
#navProp {
width: 100%;
height: 33.3%;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
font-size: 25px;
margin-top: 6.7%;
}
.center{
margin-left:auto;
margin-right:auto;
}
<html>
<head>
<title>Welcome to SIRIUS</title>
<?php require_once "theme.php"; ?>
</head>
<body>
<div id="header">
<a href="index.php" class="nav">
<div id="logoBox" class="transition">
<img src="img/icon/logo.png" class="logo">
</div>
</a>
<!--
-->
<a href="index.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon home">
</div>
</div>
<div id="navProp">Home</div>
</div>
</a>
<!--
-->
<a href="aboutUs.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon aboutUs">
</div>
</div>
<div id="navProp">About Us</div>
</div>
</a>
<!--
-->
<a href="register.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon register">
</div>
</div>
<div id="navProp">Register</div>
</div>
</a>
<!--
-->
<a href="login.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon login">
</div>
</div>
<div id="navProp">Login</div>
</div>
</a>
<!--
-->
<a href="admin.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon admin">
</div>
</div>
<div id="navProp">Admin</div>
</div>
</a>
</div>
</body>
</html>
Apologies I cant see your images as work are blocking content :P
Im guessing here but most likely it would be something that is being specified by the browser, that you have not margins etc. Try using a reset.css file or maybe using debugging (F12) on a desktop and pretend to be a phone to debug. (I'm pretty sure in chrome you can specify a phone browser type to be, im assuming all modern browsers have emulation for mobile)
Or it could be min-width: 1050px;
If you are designing this for responsive design you might want to make some #media queries.
[edit] I also notice you have nothing specifying html. Perhaps the browser is adding some css against the html tag? html {margin:0; padding:0;}
I'm a complete noob to RoR, Bootstrap and all things code based. I'm trying to implement a full screen Bootstrap Carousel in my RoR app similar to this: http://surfscore.me/
This is what I have so far: http://cryptic-woodland-6000.herokuapp.com/
Can anyone please tell me why I can't get the image to full width....it's driving me crazy!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 0px;
height: 100%;
width: 100%;
color: #5a5a5a;
margin: 0;
margin-right: 0;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.logo-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 5%;
margin-bottom: -90px;
margin-left: 5%;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 100%;
}
.carousel img {
position: relative;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
margin: 0;
}
.carousel-caption {
background-color: #0001;
position: absolute;
max-width: 400px;
padding: 35px 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 45%;
z-index: 20;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: -90;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Logo attempt
================================================== -->
<div class="logo-holder">
<img src="images/hselogo.png">
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="carousel-caption">
<h1>COMING SOON!</h1>
<p class="lead">We're busy doing some 'market research'!</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
<div class="item active">
<img src="images/greek1.jpg" alt="">
</div>
<div class="item">
<img src="images/hotel.jpg" alt="">
</div>
<div class="item">
<img src="images/mykonos.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- FOOTER -->
<footer>
<p class="pull-right">91-93 Buckingham Palace Rd, London, SW1W 0RP.</p>
<p>© 2013 HOP SKIP ESCAPE LTD · Privacy · Terms</p>
</footer>
</div><!-- /.container -->
</body>
</html>
You can achieve a similar effect by dropping the container class