I have a problem with the navbar when displayed on a smartphone.
The last item of the menu is a dropdown. It is not displayed unless I enlarge the screen. It is as if there was no more space to display the items of the submenu (while the other dropdwons work perfecty).
Could somebody tell me what mistake I did ? Here is the code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a><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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown">
Contatti
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
Thank you very much in advance
gabriele
Your code works:
https://jsfiddle.net/8c8x558e/
I think the problem would be your bootstrap links, remember you have to put these links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I think you forgot the Js link.
Remove this css in mobile view .navbar-fixed-top {position: fixed;}
you can use {position: static;}
Also use class="caret" where the is a sub-menu to make sure there is a sub-menu I used it after the text "Contatti". For any question ask me in comment. LiveONFiddle :)
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a>
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown dropdown-submenu">
Contatti <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
Related
I'm trying to integrate a custom theme for bootstrap
the theme i want to use is bootswatch
the only problem i'm currently facing is that the dropdown menu in the navigation bar is not working.
this is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
<html>
<head>
<title>Login</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I use bootstrap 4.3.1 instead of 3.3.7 to fix this problem.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Maybe you can try it.
On smaller devices the text ("JH") currently moves underneath the collapsed menu toggle on the left side of the navbar - is there a way to align it so that "JH" is level with the menu toggle but on the right side of the navbar instead? I'm struggling with how to achieve this but I'm sure it's very simple. Many thanks in advance, Jon
My code is as follows:-
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<span>About</span>
</li>
<li>
<span>Resume</span>
</li>
<li>
<span>Portfolio</span>
</li>
<li>
<span>Blog</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
http://www.jonhowlett.uk/
Put this
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
inside <div class="navbar-header">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
</div>
You're navbar has add HTML that shouldn't be necessary. See docs.
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
If you want to add a background color to the brand, just use CSS. See example.
.navbar.navbar-custom .navbar-brand {
background: #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li> <span>About</span>
</li>
<li> <span>Resume</span>
</li>
<li> <span>Portfolio</span>
</li>
<li> <span>Blog</span>
</li>
<li> <span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
I have this navbar. It works great in regular screen width, but when collapsed, the mobile navbar button doesn't work. I've tried to find any unclosed divs and other issues but can't identify any. Thanks in advance for any help! Apologies for the beginner question
<nav class="navbar navbar-default" 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-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>
</div>
<div class="navbar-brand" href="#">
<div class="text-center">
<img alt="nav" src="/assets/navbar.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<h4>
<ul class="nav navbar-nav navbar-left">
<!-- <li> Help </li>-->
<li> Buy </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Search </li>
<li class="dropdown">
My purchases<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> My profile </li>
<li class="divider"></li>
<li> Items bought </li>
<li> Items sold </li>
<li class="divider"></li>
<li> Purchase history </li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> Edit my profile </li>
<li> Manage my profile </li>
<li class="divider"></li>
<li class="dropdown-header">GOODBYE </li>
<li> <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
</ul>
</li>
</div><!-- /.navbar-collapse -->
</nav>
</h4>
Clean-up your HTML and it should work fine. There are several missing close tags (/ul, /div) and the /h4 is closed at the end.
http://bootply.com/ytu2dul2yw
I've new to bootstrap and tried to do some mock layout on my local server. Things were going well until I couldn't get the navbar to work on my mock page. I've checked on bothe safari and chrome and the results are still the same.
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
<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="#">Bootstrap Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class= "active"> Home</li>
<li > About </li>
<li > Blog</li>
<li > Contact Us</li>
<li class= "dropdown">
Themes <b class="caret"></b>
<ul class="dropdown-menu">
<li class= "dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
Popped your code into Bootply and the only thing I could see that wasn't working was your dropdown wasn't dropping down when clicked.
Your problem is on this line:
Themes <b class="caret"></b>
See the extra space you have in the data-toggle attribute? Remove that, and your dropdown works just fine.
You also had an extra </li> tag in your dropdown. Doesn't break things, but it's not needed.
BOOTPLY
HTML:
<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="#">Bootstrap Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home</li>
<li> About </li>
<li> Blog</li>
<li> Contact Us</li>
<li class="dropdown">
Themes <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
You have an error into the
Themes <b class="caret"></b>
the solution is:
Themes<span class="caret"></span>
Here the example:
Fixed example
<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="#">Bootstrap Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class= "active"> Home</li>
<li> About </li>
<li> Blog</li>
<li> Contact Us</li>
<li class= "dropdown">
Themes<span class="caret"></span>
<ul class="dropdown-menu">
<li class= "dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
<li> Admin 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- navbar -->
I am trying to get a dropdown to work using twitter bootstrap in the nav but am having trouble. When I click on "More...", nothing shows up.
Any advice?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="bootstrap1.css" rel="stylesheet">
</head>
<body>
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="/">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Browse
</li>
<li class="">
About
</li>
<li class="">
FAQ
</li>
<li>
Blog
</li>
<li class="">
Contact
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More... </a>
<ul class="dropdown-menu" >
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>Sign up</li>
<li class="divider-vertical"></li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
Try adding role="menu" to <ul class="dropdown-menu" >
I got the latest version of bootstrap and it seems to be working now.