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;
}
}
Related
I'm building a site for giggles http://briannabaldwinphotography.com/. My mobile menu button won't go away with display:none in safari on my iphone landscape mode, although it works in Chrome on my phone. I want the #menu-button to show when the device is under 500px and to disappear when it is above 500px. The menu button is added in through jquery with the id of #menu-button. If you use dev tool and look in the sources for css_tablet.css you'll see I have #menu-button set to display:none. Any advice much appreciated.
$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
$("#menu").toggle();
});
$("li").click(function(){
$("ul").hide();
});
Add this CSS -
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
#menu.js{
display: block !important; // You must have to use '!important' as javascript adding inline style on the menu (display block/none)
}
}
Above CSS will solve the Button hiding issue and also the issue we talked on the last comments.
For better understanding of Media Queries for different devices. Look at this article - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
In your "css_tablet.css" all the css is defined within a media query which is applied only to screens with a min-width of 500px.
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
... more css ...
}
In portrait view, an iPhone 5 is 320px wide, iPhone 6 is 375px and iPhone 6+ is 414px. So all of these phones dont apply the css from your "css_tablet.css" stylesheet.
So it isn't phone/tablet specific.
I have made a nav menu divided in to two (Left and Right) and I have a hide/show navigation toggle button in the middle.
The nav bar seams to behave like I want. But when I check with mobile and rotate the device from portrait to landscape or vice versa. The nav did not response. Ie the menu in the navigation go outside the screen or otherwise in wrong place.
I did fix that with a media query
But I have exactly same code (width:100%) in the media query as in the style sheet elsewhere. And it does not matter what max-width I use.
At least not for the navigation to behave correctly. My first idea was to make a reponsive website without any media queries at all. I failed in the early stage :))
It seams like now when I have a media query, the browser go and check the width of the screen if it chaanges, or something like this.
Sorry for long introduction.. now I need your help
Can there be some problems with my media query I use?
Do you have an
option to offer?
What width do you recomend or does it not matter?
Please check my code:
CSS
#media only screen and (max-width: 2767px) {
.nav {
width:100%;
}
.hidden {
display:none;
}
.normal {
display:block;
}
.center {
margin: 0 auto;
}
.navtog {
position:fixed;
z-index:1500;
left:50%;
top:25px;
transform:translate(-50%, -50%);
}
.nav {
font: 120% oswald;
color:#fff;
position:fixed;
width:100%;
background-color: rgba(0, 0, 0, 0.29);
z-index:1050;
margin: 0 auto;
}
.nav_r {
text-align:right;
padding-right:10%;
}
.nav_l {
padding-left:10%;
position:absolute;
top:0;
HTML and JS
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
e.classList.toggle('hidden');
}
</script>
<div class="center">
<div class="navtog">
<a onclick="toggle_visibility('navbar');" style="cursor:pointer;">
<img src="img/toggle.png" />
</a>
</div>
</div>
<div id="navbar" class="hidden nav">
<div class="nav_r">navigation items Right</div>
<div class="nav_l">navigation items Left</div>
</div>
As it is, your media query applies to all screen sizes up to 2767px (so basically all). Media queries in a mobile-first approach usually include min-width instead, so that different things happen at very small sizes than at larger, tablet sizes. Try this:
#media only screen and (min-width: 500px) {
...
Demo
You may need to reverse more of your display properties to get it working as you intend, but the breakpoint should typically be between your portrait and landscape widths.
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.
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;
}
I'm using the Bootstrap affix side-navigation as used in the Bootstrap documentation. As you can see there, the scrollspy doesn't make any sense when the viewport is smaller than 768px and the page is switching to mobile view. Hence, I want to deactivate the scrollspy as soon as the page switches to mobile viewe. Keep in mind that the fix should only apply on the sidebar-navigation – not on navbars. Ideas, anyone?
The fix is easy enough. Use media queries and define position:static; for your sidebar-nav div for mobile views, eg
#media (max-width: 767px){
.sidenav.affix { /* change sidenav selector to match your layout */
position: static; /* removes the affix behaviour */
width: auto; /* customise as required */
top: 0; /* customise as required */
}
}