Make Social Media Buttons Horizontal on Bootstrap mobile dropdown - javascript

How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li 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>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>

you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi

Related

Bootstrap collapsed navbar not staying collapsed after clicking sub menu

In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..
<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>

Setting navbar items to active onclick

I am having a lot of trouble making navbar item to active on click.
I have included this navbar file to different pages but when i click on an item it doesn't change its class or its styling.
I have tried many techniques from using jquery onclick functions to add class active on click to changing changing css onclick but nothing is working. Any possible help will be highly appreciated . Navbar code is below :
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li >
<a style="margin-top: -5%" href="login.php">
<button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block">
<i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
Normally this should work using JQuery:
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
you have also to check what the active class is changing.
I think what you mean is for every <li> item that you click, an active class name would be added to its list of class names. If I'm right in what I'm thinking, here's my suggestion:
HTML
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right main-ul" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
CSS
.active {
background: red;
}
JavaScript (JQuery)
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})
I added a main-ul on the first <ul> so I can easily reference to it and its <li> items then I created .active in CSS. Now whenever you click on an <li> item, a red background is applied to it indicating that it has an active class name.

My top level menu items do not work - TWITTER Bootstrap

I have a drop down menu with bootstrap, here is a fiddle:
http://jsfiddle.net/ajfbqfej/
<nav id="navvy" class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex8-collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Capabilities</a>
<ul class="dropdown-menu">
<li>Precision Machining</li>
<li>CNC Turning</li>
<li>Swiss Screw Machining</li>
<li>Medical Machining</li>
<li>CNC Milling</li>
<li>Secondary Operations</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Products</a>
<ul class="dropdown-menu">
<li>Miniature Parts</li>
<li>Nozzles</li>
<li>Bike Chain Link</li>
<li>Shafts</li>
<li>Fasteners & Screws</li>
<li>Brackets, Plates & Mounts</li>
<li>Valves</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Material Specialties</a>
<ul class="dropdown-menu">
<li>Stainless Steel</li>
<li>Plastic</li>
<li>Aluminum</li>
<li>Steel</li>
<li>Brass</li>
<li>Hastelloy</li>
<li>Monel </li>
<li>Titanium</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/About">About</a>
<ul class="dropdown-menu">
<li>Quality Assurance</li>
<li>Equipment</li>
<li>Industries Served</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Gallery">Gallery</a>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources">Resources</a>
<ul class="dropdown-menu">
<li>Latest News</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Contact-Us">Contact Us</a>
<ul class="dropdown-menu">
<li>Careers</li>
<li>RFQ</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Glossary">Glossary</a>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources/Forster-Blog">Blog</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
The top level items are not clickable, can anyone see what I might be doing wrong? Otherwise it works great.
Thanks!
OK - for me I just had to remove the data-toggle attribute from my anchors... weird!

Large dropdown div will appear on click of button with class navbar-toggle

I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<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="#">Category</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>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});

Twitter bootstrap how to replace dropdown select to menubutton

When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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 class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO

Categories