I've seen this topic,
Bootstrap 3 collapsed menu not working on mobile screens
but still couldnt resolve, i get the button, but it doesn't work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GREENLUX</title>
<!-- Bootstrap -->
<link href="http://greenlux.pt/apresentacao/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div class="container">
<!-- 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="http://greenlux.pt"><img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt=""/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Início <span class="sr-only">(current)</span> </li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>GU10 </li>
<li class="dropdown"> E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown"> R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown"> 2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown"> SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown"> DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</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>Separated link </li>
<li role="separator" class="divider"></li>
<li>One more separated link </li>
</ul>
</li>
-->
</ul>
<!--
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Link </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>Separated link </li>
</ul>
</li>
</ul>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://greenlux.pt/apresentacao/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://greenlux.pt/apresentacao/js/bootstrap.js"></script>
</body>
</html>
and btw, how can i put the menus open by mouse hover?
i've tried already and couldn't do it
You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.
https://jsfiddle.net/gno4zcrr/1/
.dropdown:hover .dropdown-menu {
display: block;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="http://greenlux.pt">
<img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="" />
</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 navbar-right">
<li>GU10 </li>
<li class="dropdown">
E27 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Par30 </li>
<li>Par38 </li>
</ul>
</li>
<li class="dropdown">
R7S <span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li> 360º</li>
<li role="separator" class="divider"></li>
<li>78mm </li>
<li>118mm </li>
<li>138mm </li>
<li role="separator" class="divider"></li>
<li> 180º</li>
<li role="separator" class="divider"></li>
<li>118mm </li>
</ul>
</li>
<li>G24 </li>
<li class="dropdown">
2G11 <span class="caret"></span>
<ul class="dropdown-menu">
<li>10W </li>
<li>32W </li>
</ul>
</li>
<li class="dropdown">
SPOT <span class="caret"></span>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Quadrado </li>
</ul>
</li>
<li class="dropdown">
DOWNLIGHTS <span class="caret"></span>
<ul class="dropdown-menu">
<li>15W </li>
<li>30W </li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Redondo </li>
<li>Oval </li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Hey I have a menu which is a list of tabs, each tab is separate from the other tab using a vertical line. I am trying to figure out how to make this menu more responsive, for example make some kind of hamburger menu. so far I didn't succeeded because I don't familiar with the principles of making responsive components very well without bootstrap.
The code is here
.tabs {
padding: 0;
}
.tabs > li {
list-style-type: none;
display: inline-block;
height: 25px;
line-height: 25px;
padding:0px 15px ;
color: #535355;
font-size: 18px;
font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
font-weight:bold;
text-decoration: none;
vertical-align: top;
cursor: pointer;
border-right: 1px solid #D1D1D1;
}
.tabs > li:last-child{
border-right:none;
}
.tabs-link{
color: #4C4C4C;
font-size: 18px;
text-decoration: none;
}
.tabs-link:hover,
.tabs-link:link{
color: #3983C4;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav id="tabs_navbar" class="navbar navbar-collapse">
<ul class="tabs">
<!-- tabs navbar-->
<li class="tabs-item">
Analytics Summary
</li>
<li class="tabs-item">
TDCG
</li>
<li class="tabs-item">
Key Gas
</li>
<li class="tabs-item">
Duval Triangle
</li>
<li class="tabs-item">
Duval Pentagon
</li>
<li class="tabs-item">
NEI
</li>
<li class="tabs-item">
PTX
</li>
<li class="tabs-item">
Gas Trends
</li>
<li class="tabs-item">
Data Table
</li>
<li class="tabs-item">
Playground
</li>
<li class="tabs-item">
Analytics Settings
</li>
</ul>
</nav>
You can use #media queries in css.
they let you define different styles for different screen sizes.
usually you define a few breaking points where the website behaves differently.
checkout Using media queries and Responsive Menu Concepts
for more information
Here is a very basic example on JSFiddle demonstrating the basic idea, try to resize the view to see the menu changes the layout mode. hover over the green box in "hamburger" mode to see the menu
If you are using Bootstrap then try this following code :
<nav class="navbar navbar-default">
<div class="container-fluid">
<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" aria-expanded="false" style="height: 1px;">
<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 class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Following is tested and works
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navigation Menu</title>
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<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">Link <span class="sr-only">(current)</span></li>
<li>Link</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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</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>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</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>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</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><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.
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!
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
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