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.
Related
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
Here is the MarkUp:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Kellumonline
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</li>
<li><a href="tech/index.html">Tech</li>
<li>Gaming</li>
<li>Skate</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Website where the code is currently published on
I have no CSS styling any of the containers or elements. I seriously have like 3 styles:
one is pulling a font from Google,
the second is specifying a width and height for my jumbotron,
the third is specifying the margin for my 3 columns at the bottom of
my home page.
I am working on my website and need some help figuring out why my navbar links are spaced the way they are.
Also, my contact page is not displaying correctly and it has the same code in it as the other pages.
Any help, feedback or constructive criticism is much appreciated.
Thanks
It's very stupid...
The navbar in your contact page has this following class:
class="navbar navbar-incerse navbar-static"
So
Change incerse by inverse
Looking at it, I can see the the Home link and the Tech link don't have their closing </a> tags. Add those in and that should sort it out.
Also, #yenne-info has the correct answer to your Contact page issue.
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
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 am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I'd like to be able to make it stick to the left of the window. Is there a particular reason not to do this?
Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.
My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren't hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
The brand is "centered" because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.
I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project name</a>
<div class="container">
<div class="nav-collapse collapse">
...
Maybe there is simpler way to do this (with recent versions of bootstrap at least).
Just replace the <div class="container"> by <div class="container-fluid">.
This will make sure that the container for the content of your header spans the full page width.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
...