I have a toggle that works for the hamburger class; however I cannot figure out how to make it so that when I click on a child of the hamburger class it will toggle the hamburger class.
<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#a">a</a></li>
<li><a class="page-scroll" href="#b">b</a></li>
</ul>
</div>
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
});
If you mean the hamburger, it works as expected.
EDIT: menu closes when a menu element is clicked
$(document).ready(function() {
$("body").on("click", ".hamburger", function() {
$(this).toggleClass("is-active");
});
$("body").on("click", "li", function() {
$(".hamburger").removeClass("is-active").trigger("click");
});
});
.navbar-toggle {
width: 100%;
}
.hamburger {
width: 50px;
height: 50px;
color: black;
cursor: pointer;
}
.line {
display: block;
height: 5px;
width: 100%;
background: black;
border-radius: 9px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#a">a</a></li>
<li><a class="page-scroll" href="#b">b</a></li>
</ul>
</div>
Related
I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I want to create a title similar to this
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
display: flex;
position:relative;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
flex:1 0 auto;
background:rgba(0,0,0,.5)
}
.button{
position:absolute;
right:0;
top:0;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
Found from here:
Navbar with Title in center and buttons to right
and I am using the navbar bootstrap documentation instead.
Found here:
https://getbootstrap.com/docs/4.0/components/navbar/
How do I create a centered title with menu buttons on the right side as well without having it look like this.
I am using the navbar bootstrap documentation because I want the navbar to work for mobile as well. Is it possible to accomplish this using the navbar from bootstrap 4.0?
My current code can be found below:
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
padding-top: 68px;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mx-auto">
<h2 class="navi">Title</h2>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
and the output of it is:
I am wondering how I can make the Title centered and the About Us/Our Product/Our Vision can still work as buttons
Is that what you want?
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
<style>
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<h2 class="navi m-0 col-8 text-center">Title</h2>
<div class="col-4 text-end">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.
add CSS
.dropdown-menu.show {
z-index: 9999;
}
I have a simple bootstrap navbar. and after this I have bootstrap carousel in the header of the site , then they work good on the lg and md screen ... but in the sm and xs screen when I click the button the navbar-collapse appear for a about 1 second then it disappear... I think that problem because of the carousel in the header but I don't know how to fix that.. I need some one to tell me the solution
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle -->
<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="#"><h3>Bondok <span>BE</span></h3></a>
</div><!-- navbar-header -->
<!-- links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home <i class="fa fa-home fa-lg"></i></li>
<li>About <i class="fa fa-user fa-lg"></i></li>
<li>Resume <i class="fa fa-file-text fa-lg"></i></li>
<li>Portfolio <i class="fa fa-photo fa-lg"></i></li>
<li>Contact <i class="fa fa-envelope fa-lg"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
and the style.scss is :
.navbar {
#include border_r(0);
margin: 0;
background-color: $white_color;
border: none;
height: 60px;
.navbar-header .navbar-toggle {
background-color: $main_color;
span {
background-color: $white_color;
}
}
.navbar-brand {
border-top: 3px solid $main_color;
h3 {
#include font_spec(24px, bold);
margin-top: 0;
span {
color: $main_color;
font-size: 28px;
}
}
}
.navbar-collapse {
z-index: 9999;
background-color: #fff;
}
}
Just use:
.navbar-default{
z-index: 1030;
}
no need z-index in .wrapper .navbar .navbar-collapse
Here is the working pen http://codepen.io/anon/pen/wzqBok
i need help with my code
using bootstrap to design n new in it. did the top nav, doing the side bar. but the left bar not lapping to the left completelty and the gap between the top and the side is too much. how can i reduce it
<!--BEGINING NAV=========================-->
<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">
<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/logo.png" alt="Logo"></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">Home <span class="sr-only">(current)</span></li>
<li>General Requirment</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control inputcurve" placeholder="Search">
</div>
<button type="submit" class="btn btn-default redbut"><span class="glyphicon glyphicon-search red"></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 07063859559</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info#myactiveschool.com</li>
<li class="dropdown">
Chike Okoli Vitalis <span class="caret"></span>
<ul class="dropdown-menu" role="menu nav1">
<li><i class="glyphicon glyphicon-picture"></i> Profile Picture</li>
<li><i class="glyphicon glyphicon-edit"></i> Account Setting</li>
<li><li><a href="#"><i class="glyphicon glyphicon-log-out"></i> Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--END NAV=========================-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked span3">
<li class="active"><i class="glyphicon glyphicon-picture"></i>Home</li>
<li><i class="glyphicon glyphicon-edit"></i>About us</li>
</ul>
</div>
</div>
<!--START SIDE NAV===================================================================================================================================-->
here is my css
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.side-nav{right: 0;left: auto;}