Bootstrap navigation troubles - Responsive issues - html

I'm building a website for a client and running into some issues. I have a fixed top and left menus and everything is working quite nicely in the mobile layout. However, when I'm on a desktop resolution and I hide the left menu, the navigation in the top menu seems to change to right justified (then when I shrink the resolution, the links drop down and the menu doubles in size). I made a div id for it but the only thing I'm really using is margin-left to give my search bar room.
Can anyone help me??? The website is: http://104.193.173.104/modx/index.php?id=1
Here is the code for my top menu:
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
<!-- Left menu toggle button -->
<button type="button" id="main-menu-toggle">
<i class="navbar-icon fa fa-bars icon"></i>
</button>
<div class="navbar-inner">
<div class="navbar-header">
<div class="nav navbar-nav" style="">
<!-- SEARCH BAR -->
[[$searchBar]]
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
<i class="navbar-icon fa fa-bars"></i>
</button>
</div>
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
<div id="main-navigation-container">
<!-- MAIN NAVIGATION -->
[[Wayfinder? &startId=`8` &outerTpl=`outerTplTop` &innerTpl=`innerTplTop` &level=`2`]]
<!-- LOGIN -->
<div class="right clearfix">
<ul class="nav navbar-nav pull-right right-navbar-nav">
<li><i class="dropdown-icon fa fa-sign-in"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
Here's the CSS for the top nav container:
#main-navigation-container {
margin-left: 347px;
width: auto;
max-height: none;
}
I'm working with Bootstrap 3.3.6 and ModX Revo for my CMS.
Thanks in advance for any help! Let me know if you need me to provide any more code snippets.

Add the following CSS:
.navbar-header{
max-width: 200px;
}

Related

How to to make bootstrap navbar smaller in width?

I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?
main.html
<div class="col-md-10">
<nav class="navbar navbar-default container-panel">
<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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-file"></span><span class="caret"></span>
<ul class="dropdown-menu">
<li><span ng-click="createXml()">Create new BPMN Diagram</span></li>
</ul>
</li>
<li><span class="glyphicon glyphicon-folder-open"></span></li>
</ul>
</div>
</div>
</nav>
</div>
main.css
.navbar.container-panel {
width:554px;
margin-left: 760px;
}
Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.
.navbar.container-panel {
width:60vw;
margin-left: 760px;
}
or
.navbar.container-panel {
width:60%;
margin-left: 760px;
}

Set bottom navbar menu on the bottom of the page without a position:fixed (bootstrap, css3)

I'd like to change my css so that the page has the bottom menu stay there (like fixed) but without the position:fixed.
Why?
Indeed, using Boostrap 3, I am using navbar-fixed-bottom .
BUT position:fixed is not supported at all on Opera Mini which accounts for 10% almost of mobile browsers (see here).
how can I create this without position:fixed ?
3 constraints:
I never want any scroll: it means if the viewport gets smaller(no matter the size of the viewport: big, small, desktop, tablet...), the menu and image will just get smaller and never any horizontal nor vertical scrollbar.
and I want the menu to stay below the image (the quality of the image, distorted or not, is not my point in this question).
i want only html and css: no javascript nor jquery. thanks
Here is an example of what I would like to do:
Here is my current code using fixed position:
<div>
<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<!-- Title -->
<div class="navbar-bottom pull-left">
BIGGA
</div>
<!-- The non-Collapsing items on navbar-LEFT -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>
News
</li>
</ul>
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-bottom pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropup pull-right"> <span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li> Profile
</li>
<li> Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-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>
</div>
<!-- Additional navbar items on the LEFT of the PULL-RIGHT stuff above -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
</div>
I will give you an idea, about how it could be solved.
Use 2 divs, one after the other. The 1st div will contain your image, or whatever you want to put in the main content area. Its height is 90%, of course you can change or modify that. The second div is your menubar, the height is 10%, modify it as per your needs. Notice the overflow:auto in the .image_content class, it will contain your main contents, regardless of its length and keep the menubar at the bottom.
<style>
.main_wrapper {
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999;
}
.image_content {
height:90%;
background:red;
overflow:auto;
}
.bottom_menu {
height:10%;
background:blue;
}
</style>
<div class="main_wrapper">
<div class="image_content">
Your main content here
</div>
<div class="bottom_menu">
Menu here
</div>
</div>
Of course, remove the red and blue colors from the divs, they are just for the testing.
Added the following image to better explain what is going on in my code -

Overflowing navbar to a second row using Bootstrap

I'm just getting started with Bootstrap, and am doing so by designed a page for myself from scratch. I'm still stuck on the navbar as of now.
Here's how I want it to work: On desktop/tablets, it should work just like conventional navbars, with one header element on the left and a list of option on the right. On mobile, however, instead of having the navbar collapse into a menu, I want it - all of it - to just move to another row within the navbar.
I tried making the class of the part I want to overflow to "sidebar", but the list still renders vertically, like with the collapse menu.
A friend of mine has implemented this on his site at "thepickletheory .com" (Can't add a direct link for lack of reputation), and it works really well there. He's just used a WordPress theme, however, and the code isn't in Bootstrap too, so I can't implement it myself either.
Here are some pictures that show what I'm trying to accomplish.
Navbar in desktop/tablet view
[Name] --- [Item 1] [Item 2]
Navbar in mobile view
[Name]
[Item 1] [Item 2]
Here's the code for the navbar that I've written so far, which moves the second part of the navbar to another row, but renders the list vertically (links are dummies for now):
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
Would really appreciate some help with getting this to work. Thanks!
EDIT 2:
Through some rather fortunate trial-and-error, I've stumbled upon the solution: the unordered list just has to be assigned to the .nav-pills class, and that's all it takes.
You has to specify navbar-collapse collapse here is used to enable the toggle menu in Small screens instead of showing full menu just look here
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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="#">Harshil Shah</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
</div>
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap don't mind which is binded in bootstrap.js. here the source
Instead of collapse you can use bootstrap grid classes source
<div class="navbar-header col-xs-12 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<!-- here side bar menu -->
</div>
which will bind accordingly by device you are using. put col size as your need.

Bootstrap mobile menu opening behind first section content

Okay I am having an issue with my bootstrap 3 mobile menu, it is opening under my first section content. After you scroll down it works fine, it just has that issue on the first section.
You can see the issue here. Just reduce the screen size till you see the mobile menu button.
Also here is my html for my nav:
<div class="navbar">
<div class="container">
<div class="navbar-header">
<!-- Brand -->
<img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png"></img>
<!-- Mobile Navigation -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="ion-navicon toggle-icon"></span>
</button>
</div>
<!-- Main Navigation -->
<nav class="collapse navbar-collapse navHeaderCollapse" id="myScrollSpy" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Team</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
I have double checked my files and nothing is causing this, anyone ran into this issue before?
Adding z-index: 9999; style to .navbar class should work. The content from first section is overlapping with the navbar. Adding a high enough z-index makes sure that it'd be above every other element on the page.
.navbar {
z-index: 9999;
}

How do you keep TwitterBootstrap's navbar fixed on top of the screen for applications with very long vertical page layouts?

I downloaded the bootstrap template from http://www.initializr.com/
My question is how do I keep the navbar fixed on top of the screen whenever I scroll down to the footer of my web page? To have a better idea of what I'm trying to achieve I made a screenshot.
example : On a mobile device perspective the NAVBAR is fixed
example : When I scroll down to the footer of the page I want the NAVBAR to stay fixed on top of the screen. As you can see the NAVBAR fails to stay fixed on top of the screen.
CODE:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Product and Services
</li>
<li>
Investor Relations
</li>
<li>
Get Support
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Search">
<button type="submit" class="btn btn-default">
<i class="icon-search icon-black"></i>Go
</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
How do I achieve this?
Just wrap the navigation bar inside a div and add these css classes to it style it as class="navbar navbar-fixed-top"
Example: http://jsfiddle.net/codovations/Uy5tt/show/
P.S: remove show from the end of the url to see the html
Update: Basically this is what they apply to the div to make it fixed on the top.
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}