I want my image in carousel to become responsive especially the height of the image. The width is okay but the height it makes the image only half. Can someone help me? Give me some ideas please. I just want only 500px of height and I achieved that but i want my image height to become 100%.
Here is the picture
Here is the full image
Here is the html code.
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-7">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 col-xs-5 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school#yahoo.com.ph</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><i class="fa fa-lock"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="40">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="GAPC" class="img-responsive">
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About us
<ul class="dropdown-menu">
<li>History</li>
<li>Mission and Vision</li>
</ul>
<li>Admissions</li>
<li>Contact us</li>
<li>Faculty Portal</li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/tae.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/tubol.jpg" alt="Chania ">
</div>
<div class="item">
<img src="img/tulok.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/ebak.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
this is my css code.
.navbar-header{
height: 74px;
}
.navbar-toggle{
position: relative;
top: 15px;
}
.navbar-default .navbar-nav > li > a {
font-weight: 560;
color: #949494;
display: block;
padding: 5px 35px 2px 45px;
border-bottom: 3px solid transparent;
line-height: 70px;
text-decoration: none;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #a92419;
background-color: transparent;
}
.navbar-default{
background-color:#fff;
margin: 0;
}
.nav>li>a {
position: relative;
}
.navbar-default .navbar-right > li > a {
padding: 0 20px;
margin-right:6px;
}
.nav.navbar-nav > li{
display: :inline-block;
}
.nav.navbar-nav{
list-style-type:none;
}
.nav.navbar-nav > li > a:hover{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#a92419;
margin:0 0 4px;
width: 25px;
height: 5px;
margin-right: 13px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background: none;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
margin: 0px;
}
.navbar.affix {
width: 100%;
qposition: fixed;
top:0;
background-color: rgba(255,255,255,0.7);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu>li>a:hover {
color:#a92419;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 3em;
color: #333;
white-space: nowrap;
}
.dropdown:hover a.dropdown-toggle {
border-bottom-color: #a92419;
color:#a92419;
}
.top-bar-dark {
background-color: #a92419;
}
.top-bar-light {
background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
border-color: #ddd;
}
.top-bar-light .top-dark-right li a:hover {
color: #32c5d2;
}
.top-bar-socials {
line-height: 30px;
padding-top: 5px;
}
.top-bar-socials:after {
display: table;
clear: both;
content: "";
}
.top-bar-socials a {
margin: 0px 8px;
text-decoration: none;
font-size:18px;
color: #fff;
}
.top-dark-right {
margin: 0px;
padding: 0px;
}
.top-dark-right li {
line-height: 40px;
border-left: 1px solid #932015;
padding: 0px 10px;
}
.top-dark-right li, .top-dark-right li a {
color: #d7d7d7;
font-size: 12px;
}
.top-dark-right li i {
margin-right: 5px;
}
.top-dark-right li a:hover {
color: #fff;
}
a.login{
text-decoration: none;
}
.fa-facebook:hover{
color:#3b5998;
}
.fa-twitter:hover{
color:#1dcaff;
}
.fa-linkedin:hover{
color:#007bb5;
}
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel-inner{
height: 500px;
}
.carousel-inner img{
height: auto;
width: 100%;
}
#media (max-width: 240px){
.img-responsive{
padding-top: 5px;
width: 190px;
height: 60px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
#media(min-width: 241px) and (max-width: 320px){
.img-responsive{
width: 240px;
height: 60px;
margin-left: 5px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
#media(min-width: 321px) and (max-width: 480px){
.img-responsive{
width: 250px;
height: 65px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
#media(min-width: 481px) and (max-width: 767px){
.img-responsive{
width: 280px;
height: 70px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
#media(min-width: 768px) and (max-width: 1024px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
}
Try this
.item.active img {
display: block;
width: 100vw;
height: 100vh;
object-fit: contain;
}
Try 100vh, CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height. Very handy when doing full screen slides.
try this :
.carousel-inner img{
height: 100vh;
width: 100%;
}
Note : for internet explorer it's supported only by ie11, for other browsers there is no problem.
UPDATE :
add this class to your style :
.item{
height: 500px;
}
.item img {
width: 100%;
height: 100%;
}
Here is a Demo : https://jsfiddle.net/qd4xhzvm/
I solved it myself by adding a max-height to .carousel-inner img. Thanks for ur effort guys. hehe.
.carousel-inner img{
width: 100%;
max-height: 500px;
}
.carousel-inner{
height: 500px;
}
Related
So if you go to diartefloral.tech and use cellphone dimension in the "Sobre Nosotros" part of the menu the footer is overlapping an image, i dont know how to fix this. Thats like the most relevant code, I'm using bootstrap, i got the in the morning with the navbar overlapping the footer but i fixed it by adding the body{ padding-top:60px;}
.principal{
background-color: rgb(230,219,241);
}
.container >a{
font-family: Charmonman, serif;font-size: 35px;padding-bottom: -5px;padding-top: 9px;
}
.site-footer
{
background: linear-gradient(120deg, #7f70f5, #0ea0ff);
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color: white;
width: 100%;
position: fixed;
bottom: 0;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:white;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:white;
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:white
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:0;
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.instagram:hover
{
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}
#media (max-width: 700px){
#logo{
font-size: 20px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 500px){
#logo{
font-size: 30px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 400px){
#logo{
font-size: 25px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 350px){
#logo{
font-size: 22px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 300px){
#logo{
font-size: 18px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 250px){
#logo{
font-size: 14px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
.imagen{
padding: 30px;
display: flex;
justify-content: center;
}
.imagen >img{
margin: auto;
border-radius: 50%;
height: 120px;
padding: 20px;
}
body {
padding-top: 60px;
padding-bottom: 60px;
}
<!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.0">
<link rel="stylesheet" href="../estilos/estilos.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Charmonman&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../estilos/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>DiArteFloral</title>
</head>
<body class="principal">
<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient navbar-static-top" style="height: 86px;" id="banner">
<div class="container"><a id='logo' class="navbar-brand logo" href="#" ><i class="fa fa-pagelines"></i>DiArteFloral y Regalos</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav" id="boton"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="menu">
<li class="nav-item"><a class="nav-link active" href="../index.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="./productos.html">Productos</a></li>
<li class="nav-item"><a class="nav-link" href="./contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link" href="./sobreN.html">Sobre Nosotros</a></li>
</ul>
</div>
</div>
</nav>
</br>
<div class="imagen">
<div class="imagen">
<img src="../img/LOGO.jpg" alt="LOGO">
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>Informacion</h6>
<p class="text-justify">DiArteFloral y Regalos es una empresa enfocada en complacer a las personas brindandoles el mejor servicio y los productos mas bonitos que se puedan crear al gusto exclusivo de cada cliente.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Categorias</h6>
<ul class="footer-links">
<li>Arreglos</li>
<li>Eventos</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Atajos</h6>
<ul class="footer-links">
<li>Inicio</li>
<li>Productos</li>
<li>Contacto</li>
<li>PSobre Nosotros</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Sergio Calderon.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="instagram" href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/6a4338d571.js" crossorigin="anonymous"></script>
<script src="../estilos/bootstrap.min.js"></script>
<script src="../estilos/theme.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
let boton = document.querySelector('#boton');
let menu = document.querySelector('#banner');
let logo = document.querySelector('#logo');
boton.addEventListener('click', ()=> {
if(menu.style.height==='86px'){
menu.style.height='240px'
}else{
menu.style.height='86px'
}
});
</script>
</body>
</html>
User agents will always display items in the DOM order.
You mean customize css properties. I see you are doing great in your live site, try to use images that sizes less than 1.5Mb, it slows rendering visuals.
I'm attempting to familiarise myself with Bootstrap in order to build a responsive website for an assignment, and have based my design off of this template.
I have replaced the main body of content with a landing screen for my website that involves a carousel (complete with captions) for the background image, as well as the website's logo in the centre of the page. Aside from the text upon it, the navbar remains unchanged.
Everything on the page is wrapped inside a wrapper div, which contains a sidebar nav for the sidebar, and a content div for the rest of the page content. Inside the content div is the bg div (contains the carousel, including its indicators and captions), hdr div (containing the toggle sidebar button as seen in the demo), and the body div (containing the logo).
Ideally, I would like everything within the content div to behave as if it were 'fixed'. I want the logo, background, carousel indicators, captions, etc. to remain in the viewport when the webpage is scrolled. However, I cannot set the position to 'fixed' as it breaks the navbar.
For now, I also have my bg div set to position 'absolute' so that the carousel captions/indicators remain in the centre of the page when the navbar is expanded or collapsed. So not only do my elements not remain fixed as I would like them, there is also tons of whitespace at the bottom of the page when the web page is viewed at lower resolutions.
Below is the code for my website.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
img {
display: block;
max-width: 100%;
height: auto;
}
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;
}
i, span {
display: inline-block;
}
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.carousel-caption h3 {
font-size: 2.5vw;
}
.carousel-caption p {
font-size: 1.5vw;
}
.carousel-indicators {
position: absolute;
margin-right: auto;
margin-left: auto;
}
.carousel-caption {
position: absolute;
margin-right: auto;
margin-left: auto;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f078';
display: block;
position: absolute;
right: 20px;
font-family: FontAwesome;
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\f077';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 0;
min-height: 100vh;
transition: all 0.3s;
position: relative;
width: auto;
height: auto;
}
#hdr {
position: relative;
z-index: 100;
padding: 20px;
}
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
}
#body {
height: 84%;
}
#logo {
position: relative;
width: 30%;
height: 30%;
top: 5%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel=stylesheet type=text/css href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website</h3>
<strong>W</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-newspaper"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paperclip"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-at"></i>
Contact
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="container-fluid" style="width:100%;overflow:hidden;">
<div id="bg" style="width:100% !important;position:absolute;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/red-purple-pattern-background.jpg');">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/140000/velka/cool-calm-green-water-background.jpg');">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/blue-brush-strokes-background.jpg');">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="hdr">
<nav class="navbar navbar-default" style="background-color:rgba(0,0,0,0);">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</div>
</nav>
</div>
<div id="body" class="container-fluid">
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
What can I do?
i'm trying to change the width of my navbar which is fixed and also has a navbar-collapse property that i want to keep when screen size changes.
I also added in the Bootstrap i am using for this page, so at the moment with the code below, the navbar is fixed but is full width, it collapses when you change to mobile site, so the only thing i want is to change the width from full width so that there is atleast 30% open space on either side of the navbar so it will be centred to the page.
and also adding a logo/image to the navbar only when its collapsed
Hope you can help me!
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }
.navbar{
background-color:white;
font-family: Amatic SC;
border:none;
font-size: 25px;
letter-spacing: 1px;
text-align:center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin,
color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3" >
<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 class="navbar-collapse collapse" style="text-align:center" >
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details</li>
<li id="scrollDirections">Directions</li>
<li id="navRsvp">RSVP</li>
<li id="scrollBucket">Bucket List</li>
<li id="scrollAccommodation">Accommodation</li>
</ul>
</div>
</nav>
</body>
</html>
You have to modify the width and centrally align your code in the media queries for the expected behaviour in mobile view.
You have to add the following css:
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
}
Refer code:
.navbar-nav.nav-justified > li {
float: none;
}
.navbar {
background-color: white;
font-family: Amatic SC;
border: none;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
<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 class="navbar-collapse collapse" style="text-align:center">
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details
</li>
<li id="scrollDirections">Directions
</li>
<li id="navRsvp">RSVP
</li>
<li id="scrollBucket">Bucket List
</li>
<li id="scrollAccommodation">Accommodation
</li>
</ul>
</div>
</nav>
The dropdown links for the notification icon activates and flashes the background-color of the bell icon, is there a way to stop this happening?
This behaviour also occurs when the dropdown is open and you click the searchbox field it activates the background color of the bell icon as well, need to stop this some how?
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.search .input-group {
padding-top: 15px;
font-family: 'Lato', sans-serif;
}
.search .input-group input.search-field {
padding: 0 10px 0 0;
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #fff;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
.dropdown-toggle.inbox {
padding-top: 15px;
margin-bottom: 5px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell li a:link {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal !important;
width: 350px;
}
.nav>li.dropdown.bell li a:hover {
color: #ff5500;
background-color: transparent;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
color: #ff5500;
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #aaa;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
span.notify-link {
display: block;
padding: 0 5px 0 5px;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 9%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 9%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
#media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
#media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
#media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.search {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
width: 100%;
overflow: hidden;
}
.search .input-group {
padding-top: 0;
}
.dropdown-menu.bell li a {
text-align: left;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
.bell,
.user {
text-align: center;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
team<span>or</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-default">4:00 AM</span><span class="notify-link">Favourites Snippet</span>
</li>
<li class="divider"></li>
<li><span class="label label-warning">4:30 AM</span><span class="notify-link">Email marketing</span>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span><span class="notify-link">
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
</span></a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
I think what you need is to target the :focus of the .dropdown-toggle and set the background-color to something like #fff or transparent. Like this:
.bell .dropdown-toggle:focus { background-color: transparent; }
Bootstrap uses a lot of "opinionated" styles like rounded corners, outlines, and focus styles that can be a pain.
add the following lines to your css in order to have only white navbar
.navbar-default {
background-color: #fff;
border-color: #fff;
}
I have created a vertical navbar that has issues with the toggle feature when becoming a horizontal bar on a mobile device. I've tried to get around it several times, and I've ended up creating a separate style sheet for the mobile version. However, now it interferes with desktop version, and if I try to hide the mobile version, the toggle feature stops working.
I'm sure there must be an easier way to do this, but I haven't found anything that's worked.
HTML
Toggle navigation
KEDEV
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse-ex1-collapse" id="navbar-collapse-ex1-collapse">
<ul class="nav navbar-nav-mobile">
<li>
<img class="icon" src="home.png">
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- End Mobile Nav -->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-right" 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-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="#about">KEDEV</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a mouseover="buttonPress('1') class="menu-button" id="aboutButton" data-toggle="tooltip" data-placement="right" title="About" href="#about"><img class="icon" src="home.png"></a>
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS
/* MobileNav*/
.navbar-mobile {
display:none;
}
.mnavbar-header{
display:none;
}
.navbar-fixed-top{
display:none!important;
}
/*Navigation*/
.container {
width:100%;
margin:0 auto;
padding:0;
border-sizing:border-box;
}
.navbar {
margin-bottom:0;
z-index:31;
position:fixed;
float:none;
display:block;
}
.navbar-collapse {
height: 100%;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
float:none;
display:block;
}
.navbar-collapse.collapse {
display: block !important;
width:100%;
overflow: visible !important;
margin-bottom:0px;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;
left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-brand {
color:white;
margin-bottom: 6em;
font-size:2em;
}
.navbar li {
margin: 0.5em 0.5em 0.5em 0.5em ;
position:relative;
}
.icon {
width:2em;
height:2em;
}
.social {
margin-top:20em;
}
.social li {
display:inline-block;
margin: -1em -1.3em -2em -1.1em ;
}
.iconSO {
width:2.3em;
height:2.3em;
}
/* Media Query */
#media (max-width: 767px) {
.navbar {
display:none;
}
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
}
.mnavbar-header{
display:block!important;
overflow:visible;
}
.navbar-fixed-top {
display:block !important;
overflow:visible;
}
.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0.6) !important;
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
position:fixed;
left:0;
width:100%;
height:100%;
overflow:visible;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
overflow: hidden !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
body {
padding-left: 0;
padding-right: 0;
}
}
Here, This should do the trick.
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Thank you for your suggestions. I have worked with it a few more hours and found an answer.
I deleted quite a bit of my media query CSS and added an overflow:hidden to my .navbar-mobile.
#media (max-width: 767px) {
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
background-color: rgba(0, 0, 0, 0.6) !important;
overflow:hidden;
}
.mnavbar-header{
display:block!important;
}
.navbar-collapse-ex1-collapse {
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
left:0;
width:100%;
height:100%;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
}
.collapse.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0,1) !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
.navbar-collapse-ex1-collapse {
display:block;
}
}
I'm still working on tweaking the transparency and background, but now the toggle works!