I'm using foundation CSS to make the website mobile responsive. Part of that is the menu that opens on the left side when viewed on any mobile devices. The menu looks great on all platforms except Safari on iOS device. Whenever I click on the hamburger icon on my app the off-canvas menu opens up but the content is empty.
Foundation core version is 5.4.5
The following is the HTML code for the menu.
<header id="header">
<nav class="tab-bar header hide-for-large-up" data-options="is_hover: false" data-topbar="" role="navigation">
<section aria-expanded="false" class="left-small left-off-canvas-toggle">
<div class="fi-list"></div>
</section>
<section class="middle tab-bar-section">
<a class="name" href="/" title="My App">My App</a>
</section>
<section class="right-small tab-header search" id="search">
<div class="fi-magnifying-glass"></div>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Personal Care</label>
<div class="container">
After Shave
Body Wash & Cleanser
</div>
</li>
<li>
<label>Food</label>
<div class="container">
Breads & Baked Goods
Breakfast
</div>
</li>
<li>
<label>Household</label>
<div class="container">
Air Fresheners
Dishwashing
</div>
</li>
</ul>
</aside>
</header>
You can see the screen capture video of the behavior here https://youtu.be/NQGnqWBHVuc.
If you notice carefully, when I close the menu, the menu flashes for a second before it closes. Can someone help me out please? Thanks.
Related
I am trying to link the nav buttons on a basic html page. Why doesn't it work? Here is my code:
<!-- Primary Menu -->
<div class="module menu left">
<ul id="nav-primary" class="nav nav-primary">
<li>Home</li>
<li>About</li>
<li>Solution</li>
<li>Facilities</li>
<li>Contact</li>
</ul>
</div>
and then .....
For the first link:
<section id="home" class="fullheight dark bg-black">
For the 2nd link:
<h3 id="about"><b><center>Clean Water Innovations was formed to bring solutions for our collective need for clean water.</center></b></h3>
For the 3rd Link:
<h1 id="solution"><b>Solution:</b></h1>
For the 4th Link:
<section id="facilities">
<div class="container text-center">
<div class="row">
For the 5th Link:
<!-- Section / Contact -->
<section id="contact" class="bg-dark dark">
Why is this happening? It looks properly linked to me.
Instead of the code segment below -
href="#home"
Try as shown below -
href="index.html#home"
The above code segment worked pretty well for me.
I just started learning HTML and CSS a week ago, and have been learning using coursera and codeacademy. I wanted to make a simple website using bootstrap, with a navigation bar on top, and a big cover pic below that.
The code looks as follows.
<body>
<header class="container">
<div class="logo"> <!--this is where the logo resides-->
<div class="row"> <!--making a row for header elements-->
<figure class="col-xs-7">
</figure>
<div class="col-xs-5" > <!--adds the 3 buttons on top right-->
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="row">
<figure class="col-xs-12"> </figure> <!--cover pic-->
</div>
</div>
</body>
</html>
When I open the html in the browser (with the style sheet), I get the image attached. enter image description here. I though the cover pic would automatically align within the 12 column grid below the navigation bar on top, cropping out the sides. My questions are:
1. Doesn't adding an image automatically fit it in the 12 grid system?
2. How do I push the 3 icons on top to the right of the navigation bar (i.e to the right of the column)?
Thanks a ton guys! I'm grateful for any advise or suggestions in advance.
I think the jumbotron class is formatted purposely to reach the edges of the page.
If I am understanding your question correctly in that you do not want the jumbotron to extend to the edge of the screen, you may want to Place the jumbotron inside the div class="container" as W3CSchools suggests
Bootstrap v3 is neat because it has already created tools like the nav bar. You could try using an using the "< nav >" tag and an unordered list like so:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--- image of your logo -->
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
I need a sticky responsive sidebar like this sites https://www.localbanya.com/ &
https://redmart.com/ please help I was searching it from weeks but had no success. And it will be helpful if it's bootstrap compatible.
Checkout Semantic-UI's sidebar. It works just like bootstrap.
Here is the html:
<body>
<div class="ui sidebar inverted vertical menu">
<a class="item">
1
</a>
<a class="item">
2
</a>
<a class="item">
3
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
</body>
And to activate the toggle using javascript:
$('.ui.sidebar').sidebar('toggle');
I am using this bootsrtap template on my web, but the side bar is not starting from start, infect it is showing some distance down, however the content are is perfect.
<div class="container-fluid" style="margin-top:80px; min-height:500px; background-color:orange;">
<div class="row">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Admin Panel
</a>
</li>
<li>
Email Master List
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="background-color:green;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
{% block contentarea %}
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
{% endblock %}
</div>
</div>
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div> </div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</script>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
I want the black side bar to starts from the top, however on mobile screen it is showing from the top.
You can position #sidebar-wrapper on top
#sidebar-wrapper{
top:0px;
}
Demo:
http://jsfiddle.net/bronni/caprkok4/2/
U have given ur container itself a margin-top:80px so obviously your sidebar will start from down , though in computed it will show margin-top:0, but if you check the container it has a margin-top:80px;
I'm building the design of a small online IDE with Twitter Bootstrap, but i'm failing to achieve the proper layout due to Ace's height problem.
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href=""><img alt="" src=""></a>
<ul class="nav pull-right">
bla bla bla
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<p>This is a sidebar</p>
</div>
<div class="span9">
<div id="editor">asdasdasddas
asd
das
das
das
das</div>
</div>
</div>
</div>
</body>
This is a simple Twitter bootstrap navbar and the container, with two grid columns: one for the sidebar, another for the editor. However, the Ace Editor does not use it's parent height, no matter what i do. How can i create something just like the actual Ace Editor kitchen sink, but using Twitter Bootstrap in a responsive manner (like Cloud9, for example)?
ace uses size of the element to which it is attached
you can do either of following
make span9 position:relative make editor position:absolute;top:0;bottom:0;left:0;right:0
call ace.edit on span9
set editor size with js see https://github.com/ajaxorg/ace/blob/master/lib/ace/ace.js#L96