I am using this navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
I am I'm trying to place the "Home" icon next to the word "Home" and place it in the same grey block, I am doing this:
<li class="active">Home<i class='glyphicon glyphicon-home'></i></li>
I have tried to place it in several places without success.
Thank you in advance.
Why not inside the anchor tag ?
<li class="active">
Home<i class='glyphicon glyphicon-home'></i>
</li>
Demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/
If you want the Home icon towards the extreme right use pull-right class to the glyphicon like this
<li class="active">
Home<i class='pull-right glyphicon glyphicon-home'></i>
</li>
Demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/
Related
I am working a little exercise on codepen and trying to style the tabs of navbar using boostrap, but when I was using the original code on the site or adding
class="list-inline"
It ended up with the items on each line like this.
Can anyone explain why that happened? I am using boostrap 4 and here is my code:
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
you would have to use list-inline-item class to the li item as well.
see the fiddle below
https://jsfiddle.net/pr6t58wL/
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Menu 1</li>
<li class="list-inline-item">Menu 2</li>
<li class="list-inline-item">Menu 3</li>
</ul>
</nav>
Please use this code I think it is work on your requirement.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="youridname1">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="youridname1">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
Can you please help me with this plunker:
https://plnkr.co/edit/ZDVUBAxMEFnoGV6GfL88?p=info
Not sure why plunker preview view not showing things. Please open a new
window by clicking right top button in preview view, which should show
something.
<div id="wrapper">
<div id="header" class="sticky shadow-after-3 clearfix">
<header id="topNav">
<div class="container">
<div class="navbar-collapse pull-left nav-main-collapse collapse submenu-dark">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown mega-menu">
<!-- PORTFOLIO -->
<a class="dropdown-toggle" href="#">
PORTFOLIO
</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-5th">
<ul class="list-unstyled">
<li>
<span>GRID</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#">1 COLUMN</a>
<ul class="dropdown-menu">
<li>SUB COLUMN 0</li>
<li>SUB COLUMN 1</li>
<li>SUB COLUMN 2</li>
<li>SUB COLUMN 3</li>
<li>SUB COLUMN 4</li>
</ul>
</li>
<li>
2 COLUMNS
</li>
<li>
3 COLUMNS
</li>
<li>
4 COLUMNS
</li>
<li>
5 COLUMNS
</li>
<li>
6 COLUMNS
</li>
</ul>
</div>
Mouse hover at GRID > 1 COLUMN, the sub column will pop up below. But this is not as expected. I expect the sub column to appear at right side of '1 COLUMN'. Please see the attached mock up for the expected behaviour. Not sure how to achieve that, please help, thanks!
I am starting using Bootstrap 3 and for my nav bar, I have a logo about 100px in height. The items are on the right, with a margin-top on the ul (to vertically center my menu item).
My issue is that when the screen is not big enough, ALL menu item starts under the logo and I'd like to have as many menu item as I can on the same line as the logo.
Here is a JS Bin to try to illustrate my issue :
http://jsbin.com/posigasile/2/edit?html,css,output
Here is a better illustration (from my working directory). The second image is what I have when the screen is big enough and the first image is what happens when the screen is smaller : http://imgur.com/a/nFn1v
Thank you !
This is the solution i found, not the most tidy one, but works.
so the trick is you divide the ul in to blocks to many ul.
when you keep just ul , it is treated as one block of code and so when you decrease the screen size, the whole blocks switchs to next line.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>Page 2</li></ul>
<ul class="nav navbar-nav">
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav">
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav">
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav">
<li>Page 3</li>
</ul><ul class="nav navbar-nav">
<li>Page 3</li>
</ul><ul class="nav navbar-nav">
<li>Page 3</li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)
Please take a look at this jsfillde.
<nav role="navigation" class="nav-main">
<ul class="nav nav-pills" id="menu-primary-navigation">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>
As you can see, the "about us" link is no longer clickable because of the image placed on the left of it. I have played with different z-index values to no success.
Do you have any suggestion on how to fix that?
A quick solution... Set "z-index:1000"
<nav class="nav-main" role="navigation" style="z-index:1000;">
<ul id="menu-primary-navigation" class="nav nav-pills">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>