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.
Related
I have been working some code, where I use Hamburger responsive menu. The menu opens and closes when clicked on the hamburger icon. I wanted to add a functionality for closing the menu when clicked outside the menu. I managed to close the menu when clicked outside but without the close animation.
Here is the JS code that I tried:
$(document).on("click", function () {
$(".navbar-collapse").removeClass("show");
});
and the HTML code:
<nav class="navbar navbar-expand-lg tm-navbar" id="tmNav">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars navbar-toggler-icon"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
A
</li>
<li class="nav-item">
B
</li>
<li class="nav-item">
C
</li>
<li class="nav-item">
D
</li>
</ul>
</div>
The above JS code closes the menu when clicked outside the menu but without the animations. I would like to close the menu with the closing animation. Would appreciate some help with this issue.
If this is Bootstrap's Collapse component (which it looks like considering the collapse and navbar-collapse classes), you don't want to remove the show class yourself. As you found out, that will skip all the other work Bootstrap does; including animating the transition.
Instead, use the provided .collapse('hide') event to cause Bootstrap to close the Collapse for you.
$(document).on('click', function () {
$('#navbarSupportedContent').collapse('hide');
});
In my navbar there is a project submenu completed and ongoing both two are also a submenus containing abc project for completed submenu and ongoing submenu consist bcd project. when I click on completed its shows the abc project and when I click on ongoing its shows the bcd project but also redirect me to the page of bcd project .So the problem is I want bcd project page to appear only when I click on bcd project 'a' tag not on ongoing submenu click.it work fine for completed submenu. The flow should be I click on project menu then ongoing menu and then bcd project then clicking bcd project redirecting me to its page. but the flow here is project -> ongoing->redirecting to bcd project. On going menu also work when I first click on it , it doent redirect me but if I first open completed menu and then ongoing menu the problem is coming.
<nav class="navbar navbar-default navbar-fixed-top probootstrap-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
<a class="navbar-brand" href="index.html" title="uiCookies:FineOak"></a>
</div>
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown" >
<a data-toggle="dropdown" class="dropdown-toggle">Projects</a>
<ul class="dropdown-menu" >
<!-- <form> -->
<li class="dropdown-submenu dropdown" >
<span>Completed</span>
<ul class="dropdown-menu">
<li>ABC Project</li>
</ul>
</li>
<li class="dropdown-submenu dropdown">
<span>Ongoing</span>
<ul class="dropdown-menu">
<li>BCD Project</li>
</ul>
</li>
<!-- </form> -->
</ul>
</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!--TO PREVENT CLOSING OF MAIN MENU WHEN CLICKED ON SUB MENU -->
<script>
$('ul.dropdown-menu').on('click', function (event) {
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
</script>
// 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!
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'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.