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;
Related
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.
I need that some content in my page would keep its position on screen even if the user scrolls the page right.
My HTML is very simple:
<head runat="server">
<title>Bla</title>
</head>
<body>
<!--header start-->
<header class="header dark-bg"></header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu"></ul>
<!-- sidebar menu end-->
</div>
</aside>
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home
</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
</section>
</section>
</body>
Take a look at:
https://jsfiddle.net/2wn8qgyb/
When scrolling right, I expect that the "Dashboard" and "Home / Dashboard" text wouldn't disappear and stand still. I want the user to have an option to click it without scrolling back to the left.
In your html, add an extra classname to this div <div class="col-lg-12">, it should now look like <div class="my-nav-bar col-lg-12">
After that, just add this to your css file:
.my-nav-bar{position:fixed;}
Here is a working Demo
Add this to your css:
.page-header {
position:fixed;
}
.breadcrumb {
position:fixed;
}
Fixed the Position of your div which you don't want to disappear
.div
{
position:fixed;
}
I have this weird issue with Materialize CSS where the sidebar overlaps the content in the "main" panel as well as the footer (see image here: most content is censored on the page, the "m" in the title is part of the title text "Problem Submission"), even though I believe I have the gridding set properly. It happens both with Chrome and Safari (I bet no hope for IE either). Here's the basic structure of my document, where all of the below markup is within the <body> tag (it's a Jinja template, script includes and everything are located in a "base" template):
<header>
<nav class="top-nav green">
<div class="container">
<i class="material-icons">menu</i>
</div>
<div class="container">
<div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
</div>
</nav>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
<li></li>
<li></li>
<li></li>
{% block navlinks %}
<li class="bold">Back to Home</li>
{% endblock %}
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
{% block jumbo_content %}{% endblock %}
</div>
</div>
<div class="row">
<div class="col s12 m9 l10"><!-- Main content goes here -->
{% block main_content %}
{% endblock %}
</div>
<div class="col hide-on-small-only m3 l2"><!-- Nothing goes here (usually TOC -->
{% block toc_content %}
{% endblock %}
</div>
</div>
</div>
</main>
<footer class="page-footer green" style = "position: -webkit-sticky;">
<div class="container">
<div class="row">
<div class="col l9 m9 s12">
<h5 class="white-text">Brand Name</h5>
<p class="grey-text text-lighten-4">Description</p>
</div>
<div class="col l3 m3 offset-m3">
<h5 class="white-text">Important Links</h5>
<ul>
<li><a class="white-text" href="/login">Login</a></li>
<li><a class="white-text" href="/contact_us">Contact Us</a></li>
<li><a class="white-text" href="/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright notice
</div>
</div>
</footer>
Has anyone had any similar issues or can anyone point out something wrong with my HTML layout?
If you check the side nav documentation and scroll all the way to the bottom, it shows how you can offset your content when using a fixed side nav.
Basically, you just add a padding left to your entire content.
header, main, footer {
padding-left: 240px;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
The media query will make sure the padding disappears when your side nav disappears on smaller screens. You can also tweak the size of the padding left according to how big your side nav is.
Im trying to make a mobile menu scrollable while keeping page content at a fixed point when both are open. You will notice the undesired visibility of the scrolling of the menu through the bottom of the page
JS FIDDLE
<div class="navigation mobile">
<div class="menu-wrap">
<div class="project-tile">
<div class="copy">
<h2>Title</h2>
View project
</div><!-- /copy -->
</div><!-- /project-tile -->
<div class="project-tile">
<div class="copy">
<h2>Title</h2>
View project
</div><!-- /copy -->
</div><!-- /project-tile -->
</div><!-- /menu-wrap -->
</div><!-- /navigation -->
<input type="checkbox" id="nav-trigger" class="nav-trigger mobile" />
<label class="mobile" for="nav-trigger">Menu</label>
<div id="content" class="site-wrap">
Copy</div>
</div>
Try changing the positioning of the navigation element and adding an overflow-scroll, like so
.navigation
{
position: fixed;
overflow-y: scroll;
}
http://jsfiddle.net/x64c1L83/3/
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element