I am having a css issue as the width of the screen gets smaller will someone please tell me how to adjust my menu bar. I am using the google translate in my menu bar but the problem I am having is when the screen is full size and as you start moving the screen in to make it smaller the google translate starts to drop down to another level making all other dropdowns on the menu bar not work properly because google translate interferes.
Is there a way to make google translate button stay inline or on the menu bar without dropping to another row?
Or even making the width of the google translate not as wide to see if it will stay on the same line?
Any help would be greatly appreciated!
http://jsfiddle.net/bobrierton/5c1vbo2s/11/
.goog-te-gadget .goog-te-combo {
margin: 0px 0px;
}
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
font-size:0px;
}
.goog-te-combo {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #687074;
text-transform: uppercase;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--=== Header v4 ===-->
<div class="header-v4">
<!-- Navbar -->
<div class="navbar navbar-default mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="row">
<div class="col-md-7">
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="assets/img/logo-header.png" alt="Logo">
<img id="logo-header" src="assets/img/logo-text.png" alt="Logo text">
</a>
</div>
<div class="col-md-5 header-right">
<div class="social margin-bottom-10">
<ul class="header-links list-inline">
<li>Apple Store</li>
<li>Google Play</li>
</ul>
<ul class="social-icons social-icons-color">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button class="btn-u btn-u-lg" type="button"><i class="fa fa-cc-mastercard"></i> Pay Online</button>
<button class="btn-u btn-u-red btn-u-lg" type="button"><i class="fa fa-calendar"></i> Make An Appointment</button>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="full-width-menu">Menu Bar</span>
<span class="icon-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active">
<a href="index.html" class="" data-toggle="">
Home
</a>
</li>
<!-- End Home -->
<!-- Driver License -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Driver License
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Fees</li>
<li>Forms</li>
</ul>
</li>
<!-- End Pages -->
<!-- Motor Vehicles -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Motor Vehicle
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Sales Tax</li>
<li>Fees</li>
<li>Forms</li>
<li>Title By Mail</li>
</ul>
</li>
<!-- End -->
<!-- Features -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Property Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Lookup/Pay Online</li>
<li>Tax Certificates</li>
<li>Discount Periods</li>
<li>Instalment Options</li>
<li>Forms</li>
</ul>
</li>
<!-- End Features -->
<!-- TDT -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Tourist Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Pay Online</li>
<li>Online Account Management</li>
<li>Collection Reports</li>
</ul>
</li>
<!-- Ens -->
<!-- Additional Services -->
<li class="dropdown">
<a href="full-width-page.html" class="dropdown-toggle" data-toggle="dropdown">
Additional Services
</a>
<ul class="dropdown-menu">
<li class="">Parking Permits</li>
<li>Hunting & Fishing</li>
</ul>
</li>
<!-- End -->
<!-- Contacts -->
<li class="">
<a href="contact.html" class="">
Contact Us
</a>
</li>
<!-- End Contacts -->
</ul>
<!-- Nav Bar Right Block -->
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
<!-- End Nav Bar Right Block -->
</div><!--/end container-->
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v4 ===-->
You can use white-space: nowrap BUT you will need to make sure that it fits in the different break points because, as you requested, it will no longer wrap to fit.
.header-links {
white-space: nowrap;
}
After adding this, simply use your media queries to make adjustments through your different breakpoints to get the look/style you desire. An example of using a media query that makes style adjustments UNDER 860px screen width would be:
#media only screen and (max-width: 859px) {
.header-links li {
padding-right: 2px;
padding-left: 2px;
}
.header-links a {
font-size: 13px;
}
}
Related
I have a bootstrap nav bar. In which i have multiple drop-down items.
Now I have another div col-md-3.
In this div I want show the items of the dropdown which I hover. For now if i hover over a dropdown then the submenu is showed instead of clicking.
So how can I show the sub items of a drodown menu in that div ?
I want that subitems are in drop-down and also in that side bar div.
My Code is like this:
<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" aria-expanded="false">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Dashboard</li>
<li class="dropdown">
Administration <span class="caret"></span>
<ul class="dropdown-menu">
<li>Time Zone</li>
<li>Holidays</li>
<li>Working Hours</li>
<li> Promt Language</li>
<li>Phone No Allocation & Extensions</li>
<li>Speed Dial</li>
<li>Confernce Welcome Message</li>
</ul>
</li>
<li class="dropdown">Dial Plan<span class="caret"></span>
<ul class="dropdown-menu">
<li>Current Dial Plan</li>
<li>Caller ID Management</li>
<li>ISD Management</li>
<li>Block Number</li>
<li>Override</li>
<li>Location</li>
</ul>
</li>
<li class="dropdown">Routing<span class="caret"></span>
<ul class="dropdown-menu">
<li>24 Hours</li>
<li>Working Hours</li>
<li>OFF Hours</li>
<li> Location Based Routing </li>
</ul>
</li>
<li>Call Recording</li>
<li class="dropdown">
Users <span class="caret"></span>
<ul class="dropdown-menu">
<li>Add User</li>
<li>View Users</li>
</ul>
</li>
<li class="dropdown">
Voice Mail<span class="caret"></span>
<ul class="dropdown-menu">
<li>Default</li>
<li>For each user</li>
</ul>
</li>
<li class="dropdown">
Provisioning <span class="caret"></span>
<ul class="dropdown-menu">
<li>Manual Softphone Configuration</li>
<li>Add Deskphone</li>
<li>Devices</li>
<li>Edit</li>
<li>Delete</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-md-12" >
<!-- Side bar-->
<div class="col-md-3">
</div>
</div>
</div>
Your code is correct, however it seems you forgot to include jQuery in your code.
I created a Codepen using your code and I've included jQuery.js at the bottom just before including the Bootstrap library.
As you can see the dropdown items work fine and, as you remove the jQuery script from the code, you can reproduce your broken scenario.
Here is the link: Codepen Link
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I'm trying to find a solution for my site navigation that consists with more links. After add more links it display in 2, 3 lines.please check the attached picture.This is after add more links
in above picture, i added blue colored link and rest of all are default bootstrap navigation. I want to keep navigation in one line. if need to see more links, need to click that blue colored link (for testing purpose i set it to display none). also when re sizing the browser it also should keep in one line.
i wrote a jquery code and it works when browser decreasing the size. but when increasing the size it doesn't work by adding one by one again. Is there anyway to do this? Anybody can please help me to solve the issue or by giving an idea.
Thanks
my codes,
$(document).ready(function(e) {
$(document).load($(window).bind("load", resThis));
$(document).load($(window).bind("resize", resThis));
var tot=$('.nav').find('.chld').length;
var pos_top=$('.btn').position().top;
var marg=$('.container').width();
function resThis(){
for(var i=tot; i>=0; i--){
if(pos_top>0){
$( ".nav .chld:nth-child("+i+")" ).addClass('a');
}
pos_top=$('.btn').position().top;
}
}
});
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
//ul{list-style:none;}
//ul li{float:left; padding:10px 30px; background-color:#C0B9B9; margin:10px; border-radius:10%;}
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
</style>
</head>
<body>
<div class="container">
<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" aria-expanded="false">
<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="#">Brand</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 chld">Link <span class="sr-only">(current)</span></li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld 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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-info btn-lg" style="float:right;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
it works as intended for me even in full-screen and resizing it to all kinds of width... cant replicate the error you are describing and showing.
I have already tried to do research to fix this problem but no fixes were working! I am using a Bootstrap 3 navigation for my site and it works great on desktop. However, in the mobile menu, I click on an item, expecting the sub nav to appear, and the whole menu closes instead - after first flashing the text of the sub nav for a millisecond. How can I fix this??
Thanks
Edit: here is my navbar setup
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://totango2015.staging.wpengine.com/">
<img src="http://totango2015.staging.wpengine.com/wp-content/themes/totango/assets/img/global/totango_logo.png" class="top-logo" />
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-product">product</li>
<li class="menu-customers">customers</li>
<li class="dropdown menu-resources"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-customer-success-resources">customer success resources</li>
<li class="menu-events-webinars">events & webinars</li>
<li class="menu-totango-support">totango support</li>
</ul>
</li>
<li class="menu-blog">blog</li>
<li class="dropdown menu-company"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-about-us">about us</li>
<li class="menu-news">news</li>
<li class="menu-careers">careers</li>
<li class="menu-contact-us">contact us</li>
</ul>
</li>
<li class="menu-login">login</li>
</ul> </div>
<!-- /.navbar-collapse -->
<hr class="nav-rule">
</div>
<!-- /.container -->
</nav>
I've been using Twitter Bootstrap to create a navbar across the top of a page which has several dropdown menus. For some reason, the first list element aligns to the bottom of the bar by virtue of a empty link that fills the top space. I copied this first term for the other list items, but none of the other elements align to the bottom or have an empty link. Any ideas for how i can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Nav Mockup</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">NCTL<a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbarHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Challenge / Links</li>
<li>STEM Equity</li>
<li>Slannis Message</li>
<li>Supporters</li>
<li>MOS Press Room</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>K12 Classroom</li>
<li>Museum Based</li>
<li>Traveling</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Achievements</li>
<li>Resources</li>
<li>Video Links</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Enews Archive</li>
<li>NCTL Studies</li>
<li>Media Coverage</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You a error in your markup
<a href="#" class="navbar-brand">NCTL<a>
Should be:
NCTL
DEMO HERE
I am new to using Twitter Bootstrap and I have a navbar that doen't collapse as it should.
It shows well on a desktop at fullscreen (all menu items on one line) but as I collapse my browser window from left to right, the navbar items grow to become two rows before appropriately stacking one on top of the other until full collapse.
How do I make the navbar collapse as it should?
I also have a div that I want to place right below the navbar div to show a company logo (image). However, the div seems to start right at the top of the page insted of directly below the navbar div.
How do I fix this?
See: Demo JSFiddle
<div class="navbar navbar-inverse 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="#">XYZ</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-list-alt"></span>Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline Sheets</li>
<li>Onduvilla Tiles</li>
<li>Other Products</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-ok-sign"></span>Guarantee<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Our Guarantee</li>
<li>Tests and Certificates</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-user"></span>Our Clients</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span>Projects<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Expos</li>
<li>Training</li>
<li>Eco Friendly Housing</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-inbox"></span>FAQ<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline</li>
<li>Onduvilla</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-download-alt"></span>Downloads</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-info-sign"></span>About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Vision and Mission</li>
<li>Eco-Responsibility</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-pencil"></span>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="TitleContent" style="text-align: center">
<img src="images/ecolinelogo.jpg" style="border-style: none" >
<br />
</div>
<div class="container body-content">
<div id="MainContent">
</div>
<hr />
<footer>
<p>© <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
</footer>
</div>
First of all give your body a little bit of padding as per you navbar height
body{
padding-top:100px;
}
because you are using fixed navbar which is fixed at the top of the page. any content you are going to put after this div will start from the body top. so the padding is necessary which is also mentioned in the docs of bootstrap.
and also you have too many menu item in your menu . which is not getting the proper space specified by the columns. so you need to control them via media queries. and i try to make it work for you here is my jsfiddle link. you could check it . It might helpful for you
http://jsfiddle.net/datechogeek/w4sJC/