I'm currently creating a responsive design for an existing site.
http://www.digitalcuttingsystems.com/
I have a problem with the navbar, I tried some tutorials but its not good enough. I want it like burger menu so that it would look good in other devices.
tutorials
http://www.w3schools.com/howto/howto_js_topnav.asp
https://css-tricks.com/responsive-menu-concepts/
http://www.hongkiat.com/blog/responsive-web-nav/
nav-menu
<div class="header">
<div>
<nav>
<ul class="topnav">
<li class="selected">
Systems Something for Everyone
</li>
<li>
About Industry Leading Engineers
</li>
<li>
Quality Industry Leading Warranty
</li>
<li >
Contact Call Us now!
</li>
</ul>
</nav>
</div>
</div>
here is my menu
https://jsfiddle.net/cpLkjm8f/
thanks.
Using fixed widths (es: width: 900px; )
prevent the tags to be resizable.
You should consider a strategy with percentual widths or media queries.
Use the below code to achieve the responsive bootstrap menu,
add bootsrap.css and bootsrap.js
<div class="header">
<nav class="navbar">
<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="#menu" 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="#">Menus</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav topnav">
<li class="selected"> Systems Something for Everyone </li>
<li> About Industry Leading Engineers </li>
<li> Quality Industry Leading Warranty </li>
<li > Contact Call Us now! </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
Use this I have created a sample further you can add your own css:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<style>
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<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="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Systems <span> Something for Everyone</span></li>
<li>About <span> Industry Leading Engineers</span></li>
<li>Quality <span> Industry Leading Warranty</span></li>
<li>Contact <span> Call us now!</span></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
</body>
</html>
Related
I tried to make top navbar left side logo and center text and right text as size of logo. i able to make left left side logo on top navbar and text on right side of the top navbar but unable to make some text in the center other top navbar, even facing the problem to make right side text(i tried to add clearflex) size as logo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></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"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I tried to do like this image:
Add these styles
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></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"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></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.2/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="#">Sitename</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page sub</li>
<li>Page sub</li>
<li>Page sub</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</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 class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>
I am using bootstrap and have this line in my html code
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
I want to increase the font size and therefore I modified it to
<a class="navbar-brand" style="font-weight: bold;font-size: larger">Brand Name</a>.
However this doesn't change anything. What am I doing incorrectly. I am assuming bootstrap css is overriding my commands, how do I force it to increase the font size? Thank you.
working Snippet (I want to increase the size of Brand Name in website)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Brand Name</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="MyStyleSheet.css" />
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!---logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
</div>
<!--menu Item here-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
About Us
</li>
<li>
Projects
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
larger, smaller
Larger or smaller than the parent element's font size, by roughly the
ratio used to separate the absolute size keywords above.
See MDN
You're most likely not seeing any increase in the size of the font because font-size: larger is inheriting it's base size from body set by Bootstrap which is 14px, navbar-brand is 18px by default so you're actually decreasing the font-size by using larger. If you inspect the navbar-brand class when applying larger, it's size is computed at 16.8px.
You can always just set it's size with px, em or rem though.
See working Example Snippet.
.navbar.navbar-inverse .navbar-brand {
font-weight: bold;
font-size: 2.5rem;
}
.navbar.navbar-inverse .navbar-nav > li {
font-weight: bold;
}
<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.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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
About Us
</li>
<li>
Projects
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
I changed my navbar min-height from 40 to 55 to use a logo.
.navbar{
position:relative;
min-height:55px
}
I want to know how to change the height of my navbar buttons:
<div class="navbar navbar-default 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">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://holdirbootstrap.de/examples/navbar-fixed-top/#"> <img src="images/logoverysmall.png">Company</a>
</div
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Über uns</li>
<li>Product</li>
<li class="dropdown">
0<b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here the full working Code, If you want to change the height change in the test1 or test2 css alone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.test1
{
height:20px !important;
min-height:40px !important;
}
.test2
{
height:20px !important;
padding-top:10px !important;
min-height:20px !important;
}
</style>
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-inverse test1">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header test1">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse test1">
<ul class="nav navbar-nav">
<li class="active test1">Home</li>
<li class="test1">Profile</li>
<li class="test1">Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Normally, In bootstrap they have already set navbar height. So if you want to modify the height use below code
.navbar
{
position:relative;
height:55px !important;
}
Where you are writing a style for particular navbar add '!important' to all element because in runtime it will take only runtime css. So use '!important' word.
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top 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>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top 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>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block