I've been searching a lot but still didn't find anything similar.
If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button.
I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need.
What I need is to remove the collapsible menu generally. Any idea?
Bootstrap is displaying collapsed elements because of the way responsive design works:
The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.
Thus, the CSS code that is responsible for displaying the "normal" navbar (i.e. the navbar for a medium to large viewport) is wrapped around #media (min-width: 768px). That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.
If you do not want to change the breakpoints as proposed in this question, you have a few other solutions:
Use the non-responsive Bootstrap library
Create your own navbar by studying the non-responsive one from Bootstrap and copying the relevant code.
You can put the navbar links inside navbar-header, and then add some CSS to override the Bootstrap defaults..
.navbar-nav {
margin:0;
}
.navbar-nav>li {
float:none;
display:inline-block;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
Demo: http://www.bootply.com/118426
Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304
i am having this issue and i have just solved it
this will undo the collapse
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
Related
I was wondering if it's possible to make a Bootstrap collapsed menu show over the page rather than pushing the page downward? I tried giving a z-index on the menu but with that, I had to make the menu use absolute positioning...bad idea. I want to stick with the route Bootstrap takes, but just make the menu overlay instead of push. Any ideas? Has anyone achieved this?
Thanks
This is how I overlaid the collapsed menu. I wrote this to override Bootstrap:
#media screen and (max-width: 768px)
{
.collapsing
{
position: absolute !important;
z-index: 20;
width: 100%;
top: 50px;
}
.collapse.in {
display: block;
position: absolute;
z-index: 20;
width: 100%;
top: 50px;
}
.navbar-collapse
{
max-height: none !important;
}
}
I used the media queries because I only wanted to affect the menu in the mobile view.
The class .collapsing is to make sure you are overlaying the page (z-index), stretching across the screen (presumably a phone) and are 50px from the top (the navbar class has a min-height: 50px).
The class .collapse.in is achieving the same as above, but for once the menu has already dropped.
What's under .navbar-collapse is to get rid of the max-height that bootstrap gives to dropdowns. I had a long menu so it may not be of need to others.
My site requires that the navigation for mobile devices behave as an accordion. I am having a terrible time trying to get this action as I cannot seem to override the slide menu behavior that is apparently default.
My question is: Should I (can I) use third-party js to override the top-bar for only mobile and tablet while maintaining the current top-bar navigation for desktop?
I have accordion menus in the sidebar for desktop but I can't seem to apply this style to the top-bar.
I hope that I am missing something obvious - and if I am, what exactly?
I am obviously doing this wrong.
Here's a demo, with comments and instructions. It re-uses most of Foundation's .top-bar class and functionality, but uses custom jQuery instead of the TopBar JS, for an accordion effect.
HTML Modifications
The following code example is excerpted from Foundation's TopBar Documentation. Make the changes described in the html comments, to convert the .top-bar to the accordion animation style.
<!-- IMPORTANT: remove the "data-topbar" attribute from .top-bar,
otherwise the topbar plugin will initialize. -->
<nav class="top-bar" data-topbar role="navigation">
...
<!-- IMPORTANT: remove the .dropdown class from the dropdown menu -->
<ul class="dropdown">
CSS
Foundation's .dropdown class doesn't work for our purposes, but a lot of the styles are useful, especially for the desktop screen sizes. In the example we re-write the class styles based on the nested ul selector, but you could use an arbitrary class name for this purpose.
/* Opens the mobile menu */
.top-bar.opened {
overflow: visible;
}
/* The rest replaces the Foundation .dropdown class */
.top-bar-section ul ul {
z-index: 999;
display: none;
}
#media only screen and (min-width: 40.063em) {
.top-bar-section ul ul {
position: absolute;
left: 0;
top: auto;
min-width: 100%;
}
}
.top-bar-section li.active ul {
display: block;
}
.top-bar-section ul ul li {
white-space: nowrap;
width: 100%;
}
/* Positions the arrow relative to the menu item */
.top-bar-section .has-dropdown > a {
position: relative;
}
.top-bar-section .has-dropdown > a:after {
top: 1.25rem;
}
/* Hover state */
.top-bar-section .has-dropdown:hover > ul {
display: block;
}
JS Init
Unfortunately, the animation doesn't work at desktop screen sizes, because of the !important flag in Foundation's CSS, here:
#media only screen and (min-width: 40.063em) {
.top-bar-section ul { height: auto !important; }
}
To make the accordion animation work on large screens you would need to remove that style declaration or rewrite the .top-bar-section class, which would be quite a bit of work. In the example implementation, the menu functions on click and hover, it's just not animated unless you're on a small screen.
// Init foundation as usual
$(document).foundation();
/* Register event handlers for .top-bar accordion menu */
// This opens the menu
$('.top-bar').on('click', '.toggle-topbar', function(e) {
e.preventDefault();
$('.top-bar').toggleClass('opened');
});
// This does the accordion animation
$('.top-bar-section').on('click', '.has-dropdown > a', function(e){
e.preventDefault();
$('.top-bar-section ul ul').slideUp();
$(e.target).next().not(':visible').slideDown();
});
Source:http://www.sepiariver.ca/demos/foundation-topbar-accordion/
my suggestion would be to keep both the menus, means on the load time in server side scripting you can put condition that if it's mobile than use third party mobile menu else you already have top-bar.
How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down.
Any ideas? jQuery, or can this be done VIA CSS?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).
Here is my: JsFiddle
bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.
One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}
I am using Html and Css to create DropDown Menu in Vertical Direction as shown here.
[http://jsfiddle.net/techspartan/8u8NH/][1]
I am using div to divide my page in two parts such that menu is displayed on left side followed by some content in the remaining space. For example if width of webpage is 1024px than I am allocating 200px to menu and remaining 824px to div that has content. But after using div I am not able to navigate to submenu "3.4.1" and "3.4.2" as shown in the url posted above as I can understand this is happening because the submenu is crossing the space allocated to it.
So how can I solve this problem and I don't want to allocate more width to my menu and that menu should be followed by content.
Any help would be most welcome.
Thanks.
Quick fix is to ensure that the Z-Index is for your nav is higher than the z-index for your content.
The reason it's closing in your fiddle because once you touch the text, you're no longer hovering over your nav but instead hovering over your text.
#nav li {
background-color: #000000;
margin-top: 1px;
position: relative;
width: 125px;
border-radius: 15px;
z-index:10;
}
Increasing z-index on the #nav li fixes this issue.
Fiddle
About a year ago, #Andres Ilich provided a beautifully elegant answer to centering the navigation bar in Bootstrap. An excerpt from the posted answer is below:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And then you can target the .center class like so:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
Since this affected the drop down menu as well, he added this:
.center .dropdown-menu {
text-align: left;
}
So that the drop down menus would behave normally.
Now I am facing a similar issue. The navigation bar is beautifully centered. Dropdowns work great. But, when you get into tablet and mobile viewports, the mobile menu also gets centered. Simply aligning the text to the left does not solve the issue since each unordered list item needs its own line.
I have been trying to figure out a way where I could simply add a class inside a media query that would undo this, but I haven't been able to find a solution.
Refer to this jsFiddle to see what I am talking about: http://jsfiddle.net/persianturtle/rAYyk/2/
My question: Is there a simple way (<50 lines of code) to undo the above code inside a media query so this navigation menu would be centered desktop view and displayed as normal on tablets and phones?
If this cannot be done with pure CSS, can a step-by-step explanation of how a jQuery solution would work? Since I have h5bp, I already have jQuery 1.9.0 linked in.
If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file.
This is where the #media queries are located that perform the "responsive design" and stylize the tablet and mobile viewports.
#media (max-width: 979px) {
.center .navbar-inner {
text-align:left !important;
}
.center.navbar .nav > li{
display:block !important;
}
}