How can i get different menu styles in a layout.
For example in the desktop view is there home, profile and messages and in the responsive mobile layout should there be a icon before each menu point. but not in the desktop version.
I'm using bootstrap as framework and i tried couple of things but it didnt worked out for me.
<header role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
Do i have to create a extra mobile menu and display the normal menu off if the viewport ist smaller than desktop?
Jsfiddle
I think what you need are media-queries.
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Example:
body {
background-color:lightgreen;
}
#media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
So you can define different styles for desktop and mobile view.
You can hide the icons on desktop.
And please do not use JQuery like linusg said. JQuery is outdated it was a long time a realy good framework but today it isn't anymore. Use normal javascript (use the newest standard Ecmascript6 and maybe Ecmascript7).
Its as easy as Zlatko Vujicic has commented: just add a media query in your css that sets display: none for the small-device layout when a specific size is reached.
While im sometimes get in trouble with this, you can also use javascript (jquery) to hide the mobile navigation.
Hope this helps
Related
I was wondering what does cause the li elements to stack on each other when I use nav-justified.
I ve read there is an issue with IE older versions, but I'm testing it on a new version Chrome.
<div id="header" class="row">
<div id="backgroundImage" class="pagebg"></div>
<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home</li>
<li>News</li>
<li>Forum</li>
<li>Support</li>
</ul>
</div>
</div>
This is my first actual Bootstrap Website and I know there is still lot to learn.
There was nothing about the issue in Bootstrap Doc.
Could something being overriding it?
I 've read that there is a bug in safari browsers while using nav-justified.
Is it a bad idea to use nav-justified? Should I use css to manipulate the text?
Or is there a simple explanation on why is bugging and stacking everything together?
Thank you in advanced
Remove navbar-nav class from the <ul> element inside
<div id="collapse" class="collapse navbar-collapse">...</div>
If it's set, following CSS rule is applied to your <li> element:
#media (min-width: 768px)
.navbar-nav > li {
float: left;
}
}
The float: left causes that "stack" effect.
According to the documentation Justified
Easily make tabs or pills equal widths of their parent at screens
wider than 768px with .nav-justified. On smaller screens, the nav
links are stacked.
Without further CSS tuning, the nav-justified only works for nav-pills and nav-tabs, try changing navbar-nav to tabs or pills.
see http://jsfiddle.net/x3yz13c5/5/
If you insist using navbar-nav try something like
.navbar-nav > li {
float: none;
}
Similar thread can be seen here How to justify navbar-nav in Bootstrap 3
I have a form wherein the user may search for example a name. after searching a table will come out. It works perfectly in the desktop but as you know I used bootstrap and it is responsive and usable in a mobile device. Now when I adjust the window size the nav bar collapses, design changes and becomes a mobile version. But then the table cannot go as small as the screen and it causes overflow on the right side. It cant go smaller because the words are long and cant we word wrapped with space because there is no space. So how do I make my nav bar and footer stretch to the width of the overflow?here is my sample interface...
<nav class="navbar navbar-inverse navbar-static-top" style="">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Envoy Search Rackings</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="<?php if(strpos($currentpage,"profile")==TRUE) {print $active;}
?>">Search Database</li>
<li class="<?php if(strpos($currentpage,"insert")==TRUE) {print $active;}
?>">Add Brochure</li>
<li>Export Data Modified</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</nav>
and here is my nav bar code. my footer has no content yet so i'll just copy the code from navbar to strech just in case. Thank you very much! sorry if i explained too long!
If anybody stumbles over this and just wants to make the table fit the device width:
Use
<div class="table-responsive"> ... </div>
around your <table> tags.
Not sure if this is what the OP wants, but I hope it helps anyone anyway :D
I wouldn't recommend stretching the nav and footer to full width as of table because user wouldn't be able see the menu button in the nav bar in first fold as it would be to the far right under scroll fold.
Basically for tables you will have to fix the container width to 100% and add overflow:auto scrollbar so user can scroll/slide just the table part to see more rather than the whole page.
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.
I want to create a navbar that looks like:
[BRAND1] ... [LINK1 | LINK2 | LINK3] ... [BRAND2]
this is what I get, but the collapsed menu looks weird and is missing the border between the navbar and the collapsed menu. http://www.bootply.com/fp8e8IYGuj
I'm happy with the look and behavior when the width is > than 768px, but not the collapsed look and behavior. I want it to behave like a "normal" collapsed menu. For example this one:
http://www.bootply.com/GDf0pzFK9b
You need to clear the floated elements, add this on your CSS:
/* navbar menu when collapsed */
#media (max-width: 767px) {
.navbar-collapse {
clear:both;
}
}
Check TheDemo
If you for some reason cant change the CSS like #Danko suggests then you could stick with the bootstrap classes provided and just duplicate brand2 element for mobile and desktop.
The hidden-* css classes within bootstrap allow you to do this with no additional CSS markup.
<div class="navbar-header">
BRAND1
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BRAND23
</div>
BRAND2
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
Example at http://www.bootply.com/Qf9w7wNK6t
You can read more on the Bootstrap Docs - http://getbootstrap.com/css/#responsive-utilities
Personally I would use the clear:both method suggested.
I'm using the navbar example:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Create Single Page</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
But when the screen enters 261px in width, the collapsible button pushes down the title of the site, making things awkward looking. I tried wrapping the "a tag" with a column but just puts a word break.
261px is extremely narrow -- very few modern devices are so low-resolution, and users generally do not expect a site's content to be usable or readable at this size.
So I'd recommend either ignoring the issue entirely (like Bootstrap itself does) or setting a minimum width in CSS like this (depending on the rest of your markup and styles, you may want to change body to a selector for your outermost container):
body {
min-width: 280px;
}
Which will add horizontal scrollbars when the page width goes below 280px, instead of attempting to be responsive to so far down a size.
If you absolutely must support a view this narrow, you could add new media queries to the CSS like:
#media screen and (max-width: 270px) {
// tiny styles for your site logo here, e.g.:
.navbar-brand {
font-size: 0.5em;
}
}
...to size down the title as needed.