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/
Related
I am currently using a Bootstrap for my website with a left sideBar navigation.
At the main content, i have 2 container for left and right content.
What I want is like the image below and i already done this:
and when the toggle button is clicked then the `rightDiv` will resize
which is my main problem and i'm not able to do:
and when the browser/device is small lets say mobile device then it be
like this and i already done this.
I am able to do the first and third image but failed at the second image which will resize the rightDiv on toggle button clicked.
so far i have this in my HTML:
<div id="wrapper">
<!--Start of Sidebar navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<!-- End of Sidebar navigation-->
<!-- Start Main Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="row-post-container">
</div>
<!--END OF LEFT DIV-->
</div>
<!--START OF RIGHT DIV-->
<div class="main-right-side-container">
<div class="right-side-container">
....
</div>
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
<!-- END Main Content -->
</div>
and in my CSS i have this for left and right sidebar of DIV:
.row-post-container{
display: table-cell;
float: left;
max-width: 800px;
width: 100%;
min-width: 300px;
margin-right: 20px;
}.main-right-side-container{
display: table-cell;
min-width: 300px;
width: 100%;
max-width: 300px;
vertical-align: top;
height: 300px;
float: left;
padding: 0px;
margin-top: 20px;
}
Anyone has an idea?
For more clarification please do ask me.
Please suggest only CSS.
Thak you very much.
EDIT: the orange is leftDiv and dark green at the right side of orange is RightDiv.
One of the main things you are not considering is having bootstrap columns.
I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -
Current Implementation on the example site
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!-- your code here -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Change to add columns like below -
In here, i suggest you should go on about adding more columns like so -
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8"> <!-- your leftDiv code here --> </div>
<div class="col-lg-4"> <!-- your rightDiv code here --> </div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
First try to make full use of bootstrap classes, check this-
HTML-
<p><input type="button" id="showHideBtn" value="Slide Menu"></p>
<div id="sidebar-wrapper col-md-3">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<div id="page-content-wrapper" class="col-md-9">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="col-xs-12 col-md-9 row-post-container">
</div>
<!--END OF LEFT DIV-->
<!--START OF RIGHT DIV-->
<div class="col-xs-12 col-md-3 main-right-side-container">
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
CSS -
.hide{display:none !important;}
JS -
$('#showHideBtn').click(function(e){
$('#sidebar-wrapper').toggleClass('hide');
if($('#page-content-wrapper').hasClass('col-md-9')){
$('#page-content-wrapper').removeClass('col-md-9');
}else{
$('#page-content-wrapper').addClass('col-md-9');
}
});
I am trying to affix menu nav bar on top fixed, but somehow the bar layout and "social icons" and "search box" I have get all messed up. I tried changing line 7 from relative to fixed position, but no luck.
Basically what I have now is the menu is on top, when you scroll down, the menu disappears for a while and then pops up again to stay affixed on top when scrolling down. No clue why the menu disappears for a sec when scrolling down to come back, but basically now I want the menu nav bar fixed on top permanently and not disappear for a sec when scrolling down. And ofcourse the current layout / width and all to stay in tact. Is it possible to achieve this somehow?
My BOOTPLY::: BOOTPLY
/* CSS used here will be applied after bootstrap.css */
.menu-container {
background-color:#000;
border-bottom:4px dashed #FFBB3A;
min-height:20px;
position:relative;
}
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<h1>MENU</h1>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
</div>
</div>
<div class="clearfix search_and_social">
<div class="clearfix navbar navbar-custom-search">
search box
</div>
<div class="clearfix navbar navbar-custom-social">
social icons
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
It looks like you're using the Bootstrap Affix Plugin and don't have it configured properly or it is doing something a little different from what you expected. The Affix plugin is setup to trigger a "sticky" header after scrolling some distance or to some element.
This will get you what is going on in this Bootstrap example.
Solution
Remove/disable Affix plugin.
Add .navbar-fixed-top to your #nav element. Then add padding-top to the body element that is equal to the height of your #nav element, which is currently 181px.
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 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;
So I am trying to accomplish horizontal scrolling for a client using just CSS (I know there are a lot of JavaScript libraries out there that help with this but I'm trying to avoid those).
I have some basic code down (thanks to help from this link and the JSFiddle therein: CSS horizontal scroll) but am unable to actually make it work.
Here is my example code that I am trying to work with: http://jsfiddle.net/8Bkxh/
HTML:
<section class="row">
<div class="scroll-wrap">
<div class="span4">
<div class="video-list">
<div class="vid-thumb-wrap">
<img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot.png');?> ">
<div class="vid-title">
<h5>In-Studio Tutorial On Recording</h5>
<p>By David Boone</p>
</div><!-- .vid-title -->
<div class="callout upcoming">
<p>Purchase Tickets Now!</p>
</div><!-- .callout upcoming -->
</div><!-- .vid-thumb-wrap -->
</div><!-- .video-list -->
</div><!-- .span4 -->
<div class="span4">
<div class="video-list">
<div class="vid-thumb-wrap">
<img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot2.jpg');?> ">
<div class="vid-title">
<h5>[Interview] The Revolution of Individual Production</h5>
<p>By Jon Foreman</p>
</div><!-- .vid-title -->
<div class="callout live">
<p>Happening Now!</p>
</div><!-- .callout live -->
</div><!-- .vid-thumb-wrap -->
</div><!-- .video-list -->
</div><!-- .span4 -->
<div class="span4">
<div class="vid-thumb-wrap">
<img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">
<div class="vid-title">
<h5>Q&A From Lengendary Pottery Teacher</h5>
<p>By George Alexson</p>
</div><!-- .vid-title -->
<div class="callout limited">
<p>Only 5 Tickets!</p>
</div><!-- .callout limited -->
</div><!-- .vid-thumb-wrap -->
</div><!-- .span4 -->
<div class="span4">
<div class="vid-thumb-wrap">
<img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">
<div class="vid-title">
<h5>Q&A From Lengendary Pottery Teacher</h5>
<p>By George Alexson</p>
</div><!-- .vid-title -->
<div class="callout limited">
<p>Only 5 Tickets!</p>
</div><!-- .callout limited -->
</div><!-- .vid-thumb-wrap -->
</div><!-- .span4 -->
<div class="span4">
<div class="vid-thumb-wrap">
<img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">
<div class="vid-title">
<h5>Q&A From Lengendary Pottery Teacher</h5>
<p>By George Alexson</p>
</div><!-- .vid-title -->
<div class="callout limited">
<p>Only 5 Tickets!</p>
</div><!-- .callout limited -->
</div><!-- .vid-thumb-wrap -->
</div><!-- .span4 -->
</div><!-- .scroll-wrap -->
</section><!-- .row -->
CSS:
.row {
position: relative;
width: 960px!important;
}
.scroll-wrap {
overflow-x: scroll;
overflow-y: hidden;
height: 180px!important;
white-space: nowrap!important;
}
Be sure to check the three external resources I have linked in that JSFiddle
All I want to do is allow the user to scroll through these five items horizontally not vertically.
I think I'm just having a mental block somewhere and I hope this may be a quick fix for somebody out there. I really appreciate any and all help where possible and I would be happy to clarify where possible.
Thanks,
Keenan
I've experienced this issue before and solved it by setting the inner divs to display: inline-block and extend the containing div with white-space: nowrap like you already did.
Works, but I don't have an idea why your solution does not work. I am quite sure I used this for some years in the same way and at some point it just stopped working.
Edit:
In case of bootstrap, you might want to explicitely set the float value to none