So my dropdowns all work fine but I've a main container div with a bg-color and as soon as the multi level dropdown menu goes over it the background doesn't display. The text is fine but the bg stops at the DIV margin.
I've tried using z-index at multiple stages even all the way up the nav div but nothing seems to work.
Has anyone experienced this before? Any ideas?
HTML Sample
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1" style="z-index:1;">
<ul class="nav navbar-nav">
<li><i class="fa fa-lg fa-home"></i> Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-lg fa-cog"></i> Tools</a>
<ul class="dropdown-menu multi-level">
<li class="">MAC Lookup</li>
<li>Locate ISP</li>
<li>PG&E Power Outages</li>
<li class="divider"></li>
Related
I am not very adept at styling websites and have trouble with css and responsive design. As such, at the suggestion of a co-worker, I've decided to give the Bootstrap toolkit a try and so far I've been very happy with it. However, I am having trouble understanding a few things about the navbar components of the kit and so far have been unsuccessful in customizing this portion of the templates.
One of my sources of confusion stems from the pervasive inclusion of a toggleable button for collapsing the navigation bar. It seems like no matter what example they show of the navigation bar, they've included the collapse classes and toggle button, even where that button doesn't appear to be displayed anywhere and the navigation bar is not collapsed. For example, take a look at the following link: http://getbootstrap.com/examples/navbar-fixed-top/
If you view the source here, there you see the button and the collapse classes, but the navbar is missing said button and it is not collapsed. When I view the CSS I do see that it has display: none; specified, but then why include it at all?
<!-- Fixed navbar -->
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Finally, I believe this issue is interrelated to the second issue I'm having, which is, I am trying to right justify the links of my customized navbar with the navbar-right class, but when I do so, the links don't move to the right. Does this have something to do with my removal of the toggle button and collapse classes? Here is my attempt which has failed miserably. I am using the base jumbotron template and have included the jumbotron and min bootstrap css files. The jumbotron css file is very minimal and only includes some body stylings for a margin and a color, I believe. I can't see where that would be preventing my navigation links from showing up on the side.
Instead, the image appears on the left, and the links appear just below it, with no styling whatsoever, just a jammed together list of links. The dropdown does not work because I was experimenting with a different method used on the angular site by specifying the uib-dropdown so I should mention that - the dropdown portion was working when I had the bootstrap classes and attributes specified.
For a jsfiddle example of what is happening when I attempt to get the links to show up on the right: https://jsfiddle.net/1jehsp5r/
In fact, I have yet to find a single working example of the right alignment in the navbar. I have re-done this code about 10 times now and not a single combination of classes and divs have yeilded a simple fixed top navigation bar with an element on the left and a set of links on the right. Take this tutorial for example: https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm - They have a screenshot of it working, but when you click the "try-it" button and it loads into an interactive screen, their OWN example doesn't even work right. Everything aligns on the left, which is exactly what I am experiencing.
Can anyone show me the right way of simply making a simple navigation bar similar to the one here: https://angularjs.org/
For the collapse button, it is set to appear in small screen for most of the cases. It's there for responsiveness (or the art of display well on all screen size).
Here is an example of collapse button : Bootstrap navbar external-content
To align items on the right side of the row, you could use the ml-auto (margin-left: auto;) class on the <ul> element.
Here is an example of a bootstrap navbar with links align on the right side.
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Hope it helps.
EDIT :
Those examples was build for Bootstrap 4 alpha 6.
I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.
HTML
<div style="overflow:auto;">
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="header-full-title img-responsive">
<img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.
Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class
.navbar-brand
Which, in your case would look something like this.
<a href="#" class="navbar-brand">
<div class="header-full-title">
<img src="http://via.placeholder.com/100x50" />
</div>
</a>
Using Twitter Bootstrap, is it possible to show menu item icons when the viewport shrinks rather than collapsing the menu altogether and just showing the three-bar button?
I have not changed the default css (other than applied the Flatly theme).
<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- <div class="col-xs-10 col-xs-offset-1">-->
<!-- Brand and toggle get grouped for better mobile display -->
<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="/">Hawksmoor</a>
</div>
#if(Auth::check())
<!-- 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><i class="fa fa-home"></i> Home</li>
<li class="dropdown">
<i class="fa fa-clock-o"></i> Timecard <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Timecard</li>
<li>CICO</li>
<!-- <li class="divider"></li>-->
<!-- <li>Separated link</li>-->
</ul>
</li>
<li class="dropdown">
<i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>View Tasks</li>
<li>Add a Task</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li><i class="fa fa-users"></i> People</li>
<li class="dropdown">
<i class="fa fa-file-text-o"></i> Policies <b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Work</li>
<li><i class="fa fa-suitcase"></i> Business Conduct</li>
<li><i class="fa fa-recycle"></i> Environment</li>
<li><i class="fa fa-fire-extinguisher"></i> Health & Safety</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Home</li>
<li><i class="fa fa-plane"></i> Holiday</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Other</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Auth::guest())
<!-- Not needed as employees will already be registered -->
<!-- <li>Sign up</li> -->
<!-- <li>Sign in</li> -->
#else
<li class="dropdown">
<i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> View Profile</li>
<li><i class="fa fa-pencil"></i> Edit Profile</li>
<li><i class="fa fa-envelope"></i> Webmail</li>
<li class="divider"></li>
<li><i class="fa fa-cog"></i> Preferences</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Sign out</li>
</ul>
</li>
#endif
</ul>
</div><!-- /.navbar-collapse -->
#endif
<!-- </div>-->
</div><!-- /.container-fluid -->
</nav>
If someone could point me in the right direction it would be much appreciated.
There are two basic tasks you need to do here: 1) disable collapse 2) hide menu text
Demo: http://www.bootply.com/MWsmEO9bb4#
1) Disable the collapsing menu and hamburger icon. You'll do this by overriding bootstrap CSS like so:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
NOTE: using !important is the simplest way to do this, but it's also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity... but that's more digging than I have patience for right now:)
EDIT: It just occured to me, what I suggested below is unneecessary. No custom #media-query triggered class needed, just use Bootstrap's hidden-xs like so:
2) Hide menu text at a given breakpoint like so:
<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>
That's it! EDIT OVER
2) Hide menu text at a certain breakpoint. You'll do this by wrapping the text in a span with custom media query Bootstrap's hidden-xs like so:
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
CSS
#media (max-width: 992px) { /* or whatever breakpoint you want */
.hidemobile {
display:none;
}
}
There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.
PS - I updated my bootply too...
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.
I have a navbar dropdown that when highlighted, shows an extra caret. It occurs on each highlighted option in the navbar.
Here is my code:
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Username
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><i class="icon-home"></i> Dashboard</li>
<li><i class="icon-user"></i> Profile</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
Try this HTML, works fine for me (Google Chrome):
http://jsfiddle.net/CpQVb/