I´m using bootstrap3 and I´m trying to create a fixed menu for mobile devices. This menu can have submenu´s and submenu´s can have a lot of content in it. So when you watch the site on mobile phone´s (320x480 eg) and the menu is very long then you can´t scroll in the inner/submenu. In other words if your screen height is too short you can´t see all the menu items because the menu bar is sticked at the top of the screen.
I´ve read a lot of post from github and here + Bootstrap's page, but can´t seem to get it to work. I think that position fixed is the problem?!
I'll try to explain with a fiddle and here below
EDIT: You can view an example here -> example (resize browser and try to hit brands)
HTML
<div id="main-nav-container">
<div class="container">
<div class="row">
<div class="col-md-12 clearfix">
<nav id="main-nav">
<div id="responsive-nav">
<div id="responsive-nav-button">
Menu <span id="responsive-nav-button-icon"></span>
</div><!-- responsive-nav-button -->
<ul class="clearfix responsive-nav">
<li><i class="fa fa-home"></i></li>
<li><span class="menu-button"></span><a title="Camera" href="http://www.webshop.com/nl/camera/">Camera</a>
<ul>
<li><a title="Canon" href="http://www.webshop.com/nl/camera/canon/">Canon</a></li>
<li> like 40 li items more for example </li>
</ul>
</li>
etc...
JQUERY
$(function() {
var sticky_navigation_offset_top = $('#main-nav-container').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#main-nav-container').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#main-nav-container').css({ 'position': 'relative' });
}
};
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
So how can I make the menu so that the with the li items is scrollable so that on smaller screens the whole submenu can be viewed?
Related
Well, I tried a lot of possible solutions and ways (using flexbox, position, etc). I cannot put my footer component on bottom BEFORE the container component being rendered. I've got an spinner loader watting for async data, and right below is the footer. So it's really ugly looking at the footer and the spinner together. I'd like to put my footer always at the bottom (not fixed) without being visible. I've been reading and testing -> How do you get the footer to stay at the bottom of a Web page? but there wasn't a solution for me.
// app.component.html
<app-header></app-header>
<app-planet-data></app-planet-data>
<app-footer></app-footer>
// footer.component.html
<nav class="navbar navbar-dark bg-dark">
<h6 class="m-2 mx-auto text-muted">Footer</h6>
</nav>
// header.component.html
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<h3 class="m-2">The Red Planet Rovers</h3>
<ul class="nav justify-content-end">
<button pButton type="button" label="Image of the Day"></button>
<button pButton type="button" label="Image Gallery"></button>
</ul>
</nav>
// planet-data.component.html
<app-loading *ngIf="loading"></app-loading>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>
You will have the main content in the webpage which is the area between the header and footer. On this main element apply this css and you will be done:
#main-component {
min-height: calc(100vh - 70px - 100px);
}
here 70 is a height of the content + padding + margin of the header.
and 100 is a height of the content + padding + margin of the footer.
This solution will work only if your header and footer size is fixed.
I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I am having some styling problems with bootstrap.
I have a small modal window containing a dropdown. However I can't seem to get the dropdown to display over the footer of the window.
I have played with the zindex of the dropdown ensuring it was higher than the windows but no luck.
Can anyone suggest what I should be changing?
The html
<div class="modal hide fade" id="store-modal">
<div class="modal-header">
<h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
<p>
Please select the store you are working from
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
#foreach (var model in Model)
{
<li>
#Html.DisplayFor(modelItem => model.StoreName)
</li>
}
</ul>
</div>
</p>
</div>
<div class="modal-footer">
</div>
You just add a class having z-index as attribute having higher than model box footer.
For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal may have z index higher than the 2000's.
so in your css i would add this:
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body class has a overflow-y: auto property. You might need to change this to:
.modal-body {
overflow-y:visible;
}
If your setting the z-index of the drop down make sure it is positioned. Meaning it has either position:absolute, position:relative, or position:fixed.
Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to know if there is any builtin class for this in bootstrap, or can it be done using the top-bar with any hack?
The question is old now.
But if somebody looks here the trick in the current version is to use the nav-stack class, like so:
<nav>
<ul class="nav nav-pills nav-stacked span2">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
The "nav nav-list" class of Twiter Bootstrap 2.0 is handy for building a side bar.
You can see a lot of documentation at
http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php
With Bootstrap 2.0 you can give your tabs the "stackable" class, which makes them stack vertically.
here is vertical menu base on Bootstrap
http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu
it is also support responsive design.
With a few CSS overrides, I find the accordion / collapse plugin works well as a sidebar vertical menu. Here's a small sample of some overrides I use for a menu on a white background. The accordion is placed within a section container:
.accordion-group
{
margin-bottom: 1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-bottom: 1px solid #E5E5E5;
border-top: none;
border-left: none;
border-right: none;
}
.accordion-heading:hover
{
background-color: #FFFAD9;
}
You can use Bootstrap's tabs with bootstrap-verticaltabs. This modifies Bootstrap's Tabs to provide an alternative vertical styling. That way you can use the built in tabs in bootstrap and get the vertical menu you are looking for.
Bootstrap Vertical Tabs
https://github.com/entropillc/bootstrap-verticaltabs
Responsive utility classes
Easiest way I can think of is to have a vertical left menu AND the collapsing Top Nav in your design and attach/use bootstraps responsive css.
Then just add classes of hidden phone, tablet etc (to suit) to your left nav and hidden desktop etc to the top nav
see: http://twitter.github.com/bootstrap/scaffolding.html#responsive
play around with that and hopefully it should be able to do what you want
This doesn't quite yet look like what I want, but I accomplished something like
this by stacking nav pills in the leftmost two spans. This is what my app's
app/views/layouts/application.html.erb file looks like:
<!DOCTYPE html>
...
<body>
<!-- top navigation bar -->
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container-fluid">
<!-- the navigation buttons bar on the left -->
<div class="sidebar-nav span2"> <!-- we reserve 2 spans out of 12 for this -->
<ul class="nav nav-pills nav-stacked">
<li class="<%= current_page?(root_path) ? 'active' : 'inactive' %>">
<%= link_to "Home", root_path %>
</li>
<li class="<%= current_page?(section_a_path) ? 'active' : 'inactive' %>">
<%= link_to "Section A", section_a_path %>
</li>
<li class="<%= current_page?(section_b_path) ? 'active' : 'inactive' %>">
<%= link_to "Section B", section_b_path %>
</li>
</ul>
</div>
<div class="container-fluid span10"> <!-- use the remaining 10 spans -->
<%= flash_messages %>
<%= yield :layout %> <!-- the content page sees a full 12 spans -->
</div>
</div> <!-- class="container-fluid" -->
...
</body>
</html>
Now the stacked pills appear on the top left, below the navbar. When the user clicks on
one of them, the corresponding page loads. From the point of view of
application.html.erb, that page has the 10 rightmost spans available for it,
but from the page's view, it has the full 12 spans available.
The button corresponding to the page currently being displayed is rendered as
active, and the others as inactive. Specify the colours for active and inactive
buttons in file app/assets/stylesheets/custom.css.scss (in this case, the
colour for a disabled state is also defined):
#import "bootstrap";
...
$spray: #81c9e2;
$grey_light: #dddddd;
...
.nav-pills {
.inactive > a, .inactive > a:hover {
background-color: $spray;
}
.disabled > a, .disabled > a:hover {
background-color: $grey_light;
}
}
The active pill's colour is not defined, so it appears as the default blue.
File custom.css.scss is included because of the line *= require_tree . in
file app/assets/stylesheets/application.css.
No, not in the current one. But you can take a look at the next version by downloading it from github. It has vertical pills and tabs. Maybe that will help? (be aware, it's under construction tho)
You can use the sidebar class to render list items vertically. Not exactly a menu, but close:
http://twitter.github.com/bootstrap/examples/fluid.html
You can use menu left sidebar collapse accordion, animated with right arrow
Demo:
http://www.jqueryscript.net/demo/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi/
Download:
http://www.jqueryscript.net/menu/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi.html
Try the following (no custom.css required):
<div class="col-md-2">
<nav>
<ul class="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</div>