I asked this question yesterday about how to make my navbar menu change from horizontal to vertically stacked depending on layout but now I notice when I make my text suitable for my large monitor it doesnt work when I shrink the window down. Is there a way I can make my text more responsive? if not do you have another menu approach? Also how can I center the Menu buttons when horizontal?
My JSFiddle
MY CSS
.menu {
background-color: rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
color: #FFFFFF;
font-size: 2em;
white-space: nowrap;
}
.row.text-center > div {
display: inline-block;
float: none;
}
/*-----------------------------------------------------------
Bootstrap Overrides
-----------------------------------------------------------*/
* {
border-radius: 0 !important;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
position: relative;
top: -58px;
padding: 0px;
margin: 0px;
border: 0px;
}
.navbar-default .navbar-nav > .active {
color: #000;
background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
color: #000;
background: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
/*Style for Bigger Screens*/
#media (min-width: 768px) {
.navbar-default a {
color: white;
}
.navbar-default li a:hover {
color: black;
}
}
/*Style for Smaller Screens*/
#media (max-width: 767px) {
.navbar-default {
top: 0px;
background: #808184;
}
.navbar-default li {
border-bottom: 1px;
border-bottom-style:solid;
border-color:#FFF;
}
}
MY HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding:0;">
<img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a class="menutext" href="Home.html">Home</a>
</li>
<li><a class="menutext" href="AboutUs.html">About Us</a>
</li>
<li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="menutext" href="#">Child Progres Monitoring</a>
</li>
<li><a class="menutext" href="#">Online Courses</a>
</li>
<li><a class="menutext" href="#">Classroom Observation Tools</a>
</li>
<li><a class="menutext" href="#">Coaching & Collaboration Tools</a>
</li>
<li><a class="menutext" href="#">Activities</a>
</li>
<li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>
</li>
</ul>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Calendar</a>
</li>
<li><a class="menutext" href="#">Contact Us</a>
</li>
<li><a class="menutext" href="#">Help</a>
</li>
<li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
</nav>
You can make text responsive using the viewport units. vw, vh, vmin, vmax. These being view width, view height, view minimum, view maximum. These will scale with your screen size. For example: 1vw = 1% of the screen width. Note this is not compatible with old browsers.
CSS example
font-size:3.5vmin;
You can use media queries to set font size in mobile view
#media screen and (max-width: 480px)
{
body {
font-size: 1.5em;
}
}
and to center align buttons, add this class -
.nav li a {
text-align: center;
}
Related
This question already has answers here:
bootstrap 3 - how do I place the brand in the center of the navbar?
(8 answers)
twitter bootstrap -- center brand in nav bar
(5 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center content in responsive bootstrap navbar
(12 answers)
Align Bootstrap Navigation to Center [duplicate]
(4 answers)
Closed 5 years ago.
How do I center both the brand and the navbar in bootstrap. Also how can I have the navbar stop around the brand and links, ie wraps around content and navbar and not stretch across the entire page. Please take a look at the
.navbar-default {
background-color: #395085;
border-color: #2a3858;
}
.navbar-default .navbar-brand {
color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-toggle {
border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dcdcdc;
}
.navbar-default .navbar-link {
color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-brand {
background-size: 1
^% auto;
background-repeat: no-repeat;
margin-right: 0px;
background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
margin-top: 5px;
}
#media (max-width:649px){
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-toggle {
color: #FFFFFF;
}
}
#mid_title {
font-size: 24px;
line-height: 24px;
font-weight: 400;
color: #fff;
margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */;
}
#middle_wrapper {
clear: both;
padding: 40px 15px 0;
overflow: hidden;
font-size: 14px;
color: #f4e9d9;
background: url(/images/templatemo_middle.jpg) center top;
}
.col_allw300 {
float: left;
}
.templatemo_text {
color: #08122a;
font-weight: normal;
text-decoration: none;
}
.lower_specs {
background-color: #BFC5CE;
}
.sb_news_box {
clear: both;
margin-bottom: 17px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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>Electro-Tech Inc</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/etp.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 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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="about.html">Electrotech</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav justify-content-center">
<li>About Us</li>
<li>Industries</li>
<li>Products</li>
<li>News</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
css I just added
Add the following to your CSS:
nav .container-fluid {
display: flex;
justify-content: center;
}
Just add these rules in your css file!
/* added rules */
.navbar .container-fluid {text-align: center;}
.navbar-header, .collapse.navbar-collapse {float: none !important; display: inline-block !important;}
This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem
MY HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
MY CSS
and the divs are of 750px in heights
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}
There are a couple of things wrong.
First, 3 of your nav-link anchors have data-target= when they should have href=
Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:
<body data-target="#navbar">
and third, if you haven't, you need to call Scrollspy via Javascript:
$('body').scrollspy({ target: '#navbar' })
Here is a Codepen with a working example:
http://codepen.io/charliebeckstrand/pen/NrWpXP
I had same problem in bootstrap 5 and downloaded bootstrap 4.3.1
and replace it with previous version.
I have trouble creating a mega-dropdown menu for Products. I want to create a responsive (I use Bootstrap) dropdown which drops down from the entire nav like most big companies.
Here is how it looks like:
I want the dropdown to be from NAME to CONTACT. I will populate it with divs with pictures and text. How can I do that?
Advice, directions or explanation would be very helpful. Thanks in advance.
Here is the navigation in the HTML file:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<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">
<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 page-scroll" href="#page-top">INVACU</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>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>VSU 200</li>
</ul>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here is the navigation in the CSS file:
.navbar-default {
border-color: rgba(34,34,34,.05);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.navbar-default .navbar-header .navbar-brand {
text-transform: uppercase;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-weight: 700;
color: #f05f40;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: #222;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #f05f40;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
color: #f05f40!important;
background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
#media(min-width:768px) {
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255,255,255,.7);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fff;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: rgba(255,255,255,.7);
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #fff;
}
.navbar-default.affix {
border-color: rgba(34,34,34,.05);
background-color: #fff;
}
.navbar-default.affix .navbar-header .navbar-brand {
font-size: 14px;
color: #f05f40;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li>a,
.navbar-default.affix .nav>li>a:focus {
color: #222;
}
.navbar-default.affix .nav > li>a:hover,
.navbar-default.affix .nav>li>a:focus:hover {
color: #f05f40;
}
}
Im a beginner in hmtl css jquery js..
I have a navigation that is sticky but can not add sub menu to navigation, also if sub menu is created i want the navigation to stay sticky. Is that possible?
Any help would to thanks...
Here is my current html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<h3>TEST NAV LOGO</h3>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>TEAM</li>
</ul>
</div>
</div>
</div>
Here is the CSS
.navbar-default {
background: #FFFFFF;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand {
color: #0066cc;
height: 65px;
line-height: 40px;
padding-left: 0px;
margin-LEFT: -10;
width:100px;
FLOAT: right;
}
.navbar-default .navbar-brand h3 {
font-weight: bold;
}
.navbar-default .navbar-nav li a {
color: #ff0000;
font-weight: bold;
height: 65px;
line-height: 30px;
FONT-SIZE: 14.5px;
}
.navbar-default .navbar-nav li a:hover {
color: #0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav > li > a:focus {
color: #0066cc;
}
.navbar-default .navbar-toggle {
margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #66AF33;
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #0066cc;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
}
You can try below code:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
Here in above code 150 is dummy value you can try a number as per your requirement.
OR
Try this link : http://www.backslash.gr/demos/jquery-sticky-navigation/
example
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
I have created a drop-down menu, in which I have created a form for search criteria.
Now, whenever I click on any input box then the menu gets closed.
Is there any way to solve it.
here is my html code :
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Search<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<center>Search Criteria</center>
<hr>
<li class="col-sm-3">
<ul>
<li>Profile ID</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Name</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Age</li>
<li>
<input type="text" size="5"> to
<input type="text" size="5">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Date of Birth</li>
<li>
<input type="date">
</li>
</ul>
</li>
</ul>
</li>
and my css code :
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
Try to use e.stopPropagation():
$(document).on('click', '.dropdown', function (e) {
e.stopPropagation();
});
Bootply Demo