Currently on my website I use the bootstrap navbar that's always at the top of the screen (even when you scroll).
Right below it I have an image carousel which is pushed below it by giving the page top padding to push it below.
The problem is that this is mostly guesswork as the height of the navbar changes with font sizes, on my high font size it overlaps the carousel, but on lower font sizes it's fine.
Is there a way to make it so the carousel is directly below the navbar without a gap, and if the navbar gets bigger due to bigger fonts to push it down more? I never want there to be an overlap or a gap.
It's not an issue with a normal navbar as the elements would just sit after eachother, but as this is the navbar-fixed-top it makes it a bit akward.
Url: http://www.gamingonlinux.com/
Code:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<div class="navbar navbar-fixed-top {:inverse}" role="navigation">
<!-- 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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></li>
<li>Home</li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Wiki</li>
<li class="dropdown">
Forum <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Forum</li>
<li>Community Page</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
{:user_menu}
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-search"></span><b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="row add-bottom-margin">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
{:carousel_list}
</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><!-- /.carousel -->
</div>
</div>
I found the answer elsewhere, instead of forcing a specific gap, calculate it with js and set it:
jQuery(document).ready(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
$(window).resize(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
});
});
Related
I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan
Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src = "images/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am trying to put a button on the left side of navbar-brand for toggling a sidebar. The button toggles the sidebar. In desktop mode, it works fine but on smaller screens, it changes position and comes to the right side of the navbar-brand.
Here are the screenshots.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Login.aspx" style="vertical-align: middle">
<img src="Logo.png" style="vertical-align: middle" /></a>
<label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">Example Distribution</label>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..." />
</form>
</div>
</div>
</nav>
<div class="container-sidebar">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Explore</li>
<li>Users</li>
<li>Sign Out</li>
</ul>
</div>
</div>
Just add this css class pull-left DEMO
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class=" navbar-toggle pull-left">
Just add this code on document.ready
There might be CSS alternative but I feel this is easy!
DEMO
$(document).ready(function(){
if($(window).width()<768)
{
$('#sidebar-toggle').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('#sidebar-toggle').css('float','left');
}
});
});
CSS Solution:
#media screen and (max-width: 768px) {
#sidebar-toggle{
float:left !important;
}
}
Updated DEMO
I'm using bootstrap to make a blog. Put a navbar that is functioning properly on the desktop, when it gets to a smaller screen size, scroll the navbar.
When trying to do the same process on a mobile, scroll the navbar does not work.
Below the image as it is.
The blog url: www.sesmt.org
http://i.stack.imgur.com/0ZbcW.png
Code in Jsfiddle
http://jsfiddle.net/mtsys/Qs4zw/
<div class="col-md-3">
<div class="sidebar-nav">
<div class="navbar navbar-default navbar-inner" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-sm visible-xs navbar-brand">Menu Clique para abrir</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dados">Principal</li>
<li>Home</li>
<li>Contato</li>
<li>Últimas Atualizações</li>
<li>Mapa do Site</li>
<li>Precisa de ajuda?</li>
<li class="dados">Geral</li>
<li>Diversos</li>
<li>Processos</li>
<li>Notícias</li>
<li class="dados">SESMT</li>
<li>Normas</li>
<li>Consulta CA</li>
<li>Consulta CNAE, CID-10, CBO</li>
<li>Implantação</li>
<li>PPP</li>
<li>PPRA</li>
<li>PCMSO</li>
<li>A.P.R.</li>
<li>Cartilhas</li>
<li>Check-List</li>
<li>DDS</li>
<li>DDS - Lista</li>
<li>EPI</li>
<li>Mapa de Riscos</li>
<li>Ordens de Serviços (OS)</li>
<li>Placas</li>
<li>Procedimentos</li>
<li>Diversos</li>
<li>Perguntas / Respostas</li>
<li class="dados">Multimidia <span class="badge text-right">52</span></li>
<li>Fotos</li>
<li>Vídeos</li>
<li class="dados">Emprego</li>
<li>Vagas</li>
</ul>
</div><!--/.nav-collapse -->
</div>
i think you should add css to nav controller
overflow-y: auto !important;
For some reason that I can't figure out, bootstrap 3 on my site is having it's way with me. The toggle menu for when the screen-size is small won't open.
Site http://www.gamingonlinux.com, code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- 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="http://www.gamingonlinux.com"><img src="/templates/default/images/navbar_logo_light.png" alt="GamingOnLinux" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li>Community Page</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu">
{:user_menu}
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" style="padding-right: 5px;" class="form-control search-bar" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</div>
</nav>
You have an overriding style in another style sheet, style.light.min.css:
#media (max-width: 985px) {
.navbar-collapse.collapse {
display: none!important;
}
}
Remove that, and the navbar will toggle correctly.