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.
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.
This is what I have:
<div class="container" style="padding-top: 70px;">
<div id="navbar">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse 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>
<a class="navbar-brand" href="/">
<div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php include('includes/navbar.php'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The <?php include('includes/navbar.php'); ?> just adds the <ul class="nav navbar-nav"> with the <li> tags from another array file.
This issue only happens when the toggle button is available on smaller devices. Clicking on the button does nothing visually (but it does change classes in the code). Clicking the button a few more times will result in the disappearing of the complete navbar. I removed any other css styling that could affect the navbar but is still the same. I use Bootstrap v3.3.7 using the CDN links from the Bootstrap website.
I found the problem. The toggle button has data-target="#navbar" which targets the <div id="navbar" class="navbar-collapse collapse">. I didn't realize that I had all the navbar wrapped up in a ´div´ with the id of navbar. So that's where the conflict was.
// 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 am trying to use easytabs jquery with Twitter Bootstrap 3. The problem is when i try to resize it, the navbar-toggle isn't working anymore when I click it, nothing appears. Any idea why?
Here is what my html structure looks like:
<nav 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 collapsed" 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>
<h1><a class="navbar-brand" href="#">Bach Wigs</a></h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="tabContainer">
<ul class="nav navbar-nav navbar-right">
<li class='active'>Salon</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Hair Care</li>
<li>Hair Extensions</li>
<li>Hair Color</li>
<!-- <li class="divider"></li> -->
</ul>
</li>
<li>Location</li>
<li>Contact Us</li>
</ul>
<section class="body">
<div id="salon">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
<div id="services">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
</section>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And here's the javascript code when i try to use easytabs:
$(document).ready( function() {
$('#tabContainer').easytabs({
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
animationSpeed: 'slow'
});
});
UPDATE:
I changed tabContainer back to bs-example-navbar-collapse-1 and created another div to place the tab id for easytabs jquery to function. Problem now is the body contents are also getting hidden when going responsive. I know it's because of the order, I'm finding ways how to solve this. Hopefully you can give out some ideas too. Thanks!
If you want, you can take a look at the website itself. http://webguy.moe/hair