I have a bootstrap component nav-tabs and it works normally when the page width is larger than needed for the line (bootstrap .row div).
The problem is that when I change the view for mobile devices, responsive design is not behaving as it should and the tabs are misaligned.
See the code in the link below, the extent to which the page width is decreased, the Company, Support and Design tabs are behaving strangely.
http://www.bootply.com/Ym1iDjaBjz#
That's normal because there is not enough space for all tabs.
You could reduce padding at .nav-tabs li a to create space or add the folowing rule to make them display in 100% width.
.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }
Good Luck!
I've used the bootstrap-tabcollapase library in similar situations: https://github.com/flatlogic/bootstrap-tabcollapse
It's a third-party bootstrap add-on that converts tabs into accordion panels at small media query widths.
Related
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
Did some searching but only found info for the megaBar. Would like to have 100% width dropdown widths and implement it with as little css/js on top of Foundation as possible.
I'd like to do a sub menu (ul > li.has-dropdown -> ul.dropdown) that is 100% window width similar to the one on Mashable and shows on hover. The Foundation megaBar is outside of the nested nav structure but that's not what I'd like for my Wordpress template (want to stay in the nested walker type menu tree).
If you hover over any of the top menu links on Mashable, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).
I'm using Foundation 3.2 and have the <div class="contain-to-grid fixed"><nav class="top-bar"> setup so that it is fixed to the top and always 100% window width while the top-bar has a max-width: 1440px, just like the Mashable site.
Now I just need the dropdown (sub menu) part sussed out.
This will reset your top bar submenu to be 100% of your top bar's width and will organise your submenu items in responsive columns, just as a flyout content but still preserving the navigation behavior on the small screen size
#media only screen and (min-width: $screenSmall) {
nav.top-bar > section > ul > li.has-dropdown{
position: static;
& > .dropdown{
#include outerRow();
& > li.has-dropdown{
#include column(3);
min-width: auto;
.dropdown{
#include outerRow();
position: static;
visibility: inherit;
top: auto !important;
left: auto !important;
padding: 0;
min-width: auto;
li{
#include column(12);
min-width: auto;
}
}
}
}
}
}
Foundation does come with the functionality for a dropdown menu, so you could replicate the type of navigation used by Mashable with the Foundation framework.
If you read the documentation:
http://foundation.zurb.com/docs/navigation.php
You'll see that in the Nav Bar example, Nav Item 4 has a dropdown with its own rows/columns. As per the docs, "You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns."
You should be able to specify the size of the dropdown so that it spans the page, by using CSS to alter the size of the flyout class.
I searched everywhere for an easy answer to making the drop down mega menu 100% of the container and found it here:
http://codepen.io/sldavidson/full/Jseph
The one essential style was this:
.open {left: 0 !important;}
This UI component is not part of Foundation (see Foundation Components). As you already mention, the dropdown menu is limited to showing nested menu elements.
Creating the same functionality as in the Mashable site is out of the scope of Foundation and will involve developing it by your own. The question is IMHO not suitable to be answered in Stack Overflow.
I'm wondering how mashable.com hides its menu button - which appears in the top right hand corner - when the page is above a certain width and disappears when the page is below a certain width. A specific CSS rule:
html.no-touch .main-menu li.menu
{
display: none;
}
takes precedence over the rule that displays the icon:
.navbar .nav > li
{
display:block;
float: left;
}
but I can't see how it's doing it since disabling JavaScript appears to cause no ill effects and none of Css classes applied to parent elements seem to change. It seems that:
html.no-touch .main-menu li.menu
{
display: none;
}
should always take precedence, but clearly doesn't and somehow this appears to have been accomplished solely with CSS and I'm curious to know how.
A graphic illustrating this is here.
They are using css #media queries to show and hide different elements at different resolutions.
Mashable.com uses Skeleton which is a very good resposive website design framework. It has well defined #media queries to hide or display divs depending on viewport size.
I am setting up a jQuery mobile webpage. We set up a NavBar in the header.
The problem that occurs right now is that the navbar is padding (I guess) 1px to the right.
So on Mobile screens the navbar is lining out to the right and does not fit perfectly under the header bar..
The links o you could see what i Mean: http://lc.gorillaspots.nl/test/l/web/test/test.php
For example I put the Navbar as a stand alone in the Page (under the header navbar) and then you can see it had 1px on the right missing..
WI can't seem to find the problem in stylesheet.
If you have an another css file and if it is below jquery mobile css file add this to it:
.ui-navbar li .ui-btn {
margin: 0 -1px !important;
}
Original style is attached to a tag (div[data-role="navbar"] ul li a)
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.