// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
if($(window).width()<768)
{
$('button#mobile-nav').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('button#mobile-nav').css('float','left');
}
});
});
<header class="nav">
<nav class="navbar navbar-default navbar-fixed-top navbar-color" role="navigation">
<div class="container-fluid">
<div class="navbar-header mobile-nav-header">
<button id="mobile-nav" type="button" class="navbar-toggle" role="button" aria-label="Toggle Navigation" 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>
<div class="navbar-right" id="facebook-mobile">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- navbar-header mobile-nav-header -->
<div class="collapse navbar-collapse text-uppercase" id="navbar">
<ul class="nav navbar-nav">
<li><a title="Welcome" class="glyphicon glyphicon-home" href="index.php"><span class="hidden">Home</span></a></li>
<li><a title="About" target="_self" href="#about">About</a></li>
<li><a title="Service" target="_self" href="#services">Services</a></li>
<li><a title="Address" target="_self" href="#location">Location</a></li>
<li><a title="Gallery" target="_self" href="gallery.php">Gallery</a></li>
<li><a title="Contact" target="_self" href="contact.php">Contact</a></li>
</ul>
<div class="navbar-right" id="facebook-desktop">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- #navbar -->
</div> <!-- container-fluid -->
</nav>
</header>
I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!
I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.
On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".
before-page-loads.png
after-page-loads.png
I have also provided my JavaScript and HTML code.
Thanks for your help!
Related
I am looking at this theme and it is exactly perfect of what I am looking for (Side bar wise): http://themesdesign.in/webadmin_1.1/layouts/green/index.html
I want the Menu Button that expands/minimizes the side bar, while still retaining all the side bar menus.
When it's in XS screen, I want the side bar hidden, but pops up when that menu button is pressed.
This is what I have so far in codes:
<nav class="navbar-default navbar-static-side" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="sidebar-collapse hidden-xs">
<ul class="nav navbar-collapse collapse" id="side-menu">
<li class="nav-header">
<h2 style="color: #e8e8e8"></h2>
<h6 class="" style="color:#808080;">By: </h6>
</li>
<li>
<a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
<ul class="side-menu-ul collapse in" id="firstMenu">
<li>Dashboard v.1</li>
<li class="active">Dashboard v.2</li>
<li>Dashboard v.3</li>
<li>Dashboard v.4</li>
<li>Dashboard v.5 </li>
</ul>
</li>
<li>
<a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a>
<ul class="side-menu-ul collapse" id="secondMenu">
<li>Inbox</li>
<li>Compose Mail</li>
<li>Single Mail</li>
</ul>
</li>
</ul>
</div>
</nav>
Having not much design experience, I'm not really sure on how to proceed from here. Especially the part where clicking a button minimizes the side navbar. Would anyone be able to help me?
Edit: I just found another great example here: http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/ The section "Left sidebar that collapses to icons" has what I am looking for. However, the problem with that one is, when it's collapsed to icons, it does not show any menu sub-items.
You can use a click event to update the state of your application when the button is clicked.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Since you are going from one CSS state to another with your sidebar, your best bet would probably be to make both solutions in CSS. This way you can change a parent containers class through the onclick event of the button.
If you want it closed for example you would add a closed class to your sidebar and have your closed css cascade downwards by using:
.closed .child-element {}
To target child elements of the closed state.
i have a question and that is about my navbar collapse in html. i currently use
http://pastebin.com/s92VvJr6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
<script>
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
</script>
<img klass="crab" src="images/crab.png" height="50" width="50">
<a class="navbar-brand" href="">Restaurang MaxLax</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="menu-collapsed">
<div class="bar"></div>
<div class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
(i don't know how to paste it in here, im new)
when the page goes to 765px width it shows the bar icon. problem is that i can't click on it to toggle down some menus. so my question leads to
Q: How do i write the script so it works will with the code.
would also be great if you can make it for me :) hehe
Mvh Max
So you are using a boostrap navbar without calling the bootstrap js file or the css file for that matter? At least I am not seeing it in your code, and the bootstrap js file should be called directly after the jquery call. Link those two files in from bootstrap and you should have no issue toggling the navbar.
Also as stated this isnt some freelance site that we will just make your code for you. This is a site for you to learn what it is you are doing. If I were you I would edit out that statement pronto or you risk a flurry of downvotes and having the question removed
I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px.
So far so good, I changed the scroll opacity using the following code I found online:
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work.
When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.
I am sorry for my crappy English, but I hope you understand my problem :)
Edit: Here's my navbar code:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<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 topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
TEAM
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
I have a website and each page is using a bootstrap toggle/collapse navbar. All the page this works fine except for one. For some reason on one of the pages the navbar collapses once to the appropriate screen size, but it does not drop down. However, I noticed that if I comment out a JS file I have being sourced at the bottom of the html, like so <!--<script src="js/index.js"</script>--> then the drop down works. What's weird is that, 2 of the other pages on the same site source the same JS script, and the dropdown still works...maybe I'm just blind. The code for the nav is as follows :
<nav class="navbar navbar-inverse navbar-fixed-top" 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="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And there's honestly not a lot of JS, just one scroll function, and another "hover" function that I will probably move over to CSS eventually..
$(document).ready(function() {
$(".business-header img").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $(".section-two").offset().top
}, 1500);
});
});
$(".image-wrapper img").mouseenter(function() {
$(this).css("box-shadow", " 0 0 30px #F0DEBD");
}).mouseleave(function() {
$(this).css("box-shadow", "none");
});
I should mention as well that each page has an identical nav. Is there something one of the functions that is causing this? I tried to search this topic on other posts, but was unsuccessful. Cheers
This is, most times, due to bootstrap js library being loaded more than one time
I'm currently building the website for my brand new creation and - since I've never been such a CSS guru - I need your lights!
There is a central screenshot (with the editor inside). When the window is at full size, the screenshot appears fine and centered as it's supposed to be. When I start reducing the width of the window, the image seems as if it's moving to the right. Would it be possible to keep it where it initially is, and resize it when the window resizes?
On resizing, the navbar menu collapses and a toggle button (mobile-style) is created in its place. Is there any way to disable this? Or, at least, not trigger at that stage but at a smaller width (while the navbar-brand is still fitting)?
That's the core HTML section:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
<span class="sr-only" style="color:black;">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" width="40"> Peppermint</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><i class="fa fa-home"></i> Overview</li>
<li><i class="fa fa-question-circle"></i> Documentation</li>
<li><i class="fa fa-shopping-cart"></i> Buy</li>
<li><i class="fa fa-life-ring"></i> Support</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="container" >
<div class="row-fluid" style="text-align:center;">
<img src="images/screenshot2.png" >
</div>
</div>
</div>
And here's the live page: http://www.osxpeppermint.com
Thanks a lot!
The image is larger than the containing div so it jumps outside. Simplest solution is to add the img-responsive to the image:
<img src="images/screenshot2.png" class="img-responsive">
If you want the nav bar to collapse at a different screen width, you will need a custom download of the Bootstrap library. Go to http://getbootstrap.com/customize/ and change the #grid-float-breakpoint value from it's default of #screen-sm-min to whatever width you require.