I Need your help
I am a beginner in web development
Can you explain why the input field is not aligning in center ?
<"input type="text" id="search_bar" class="form-control" placeholder="Search" align="center">
In the CSS I tried adding "float:center;" at multiple places in the CSS related to the input field but nothing seems to work at all.
here's the code :
<!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 Navbar Dropdown Login and Signup Form with Social Buttons</title>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body{
font-family: 'Varela Round', sans-serif;
margin:0px;
}
.form-control {
box-shadow: none;
font-weight: normal;
font-size: 13px;
}
.form-control:focus {
border-color: #33cabb;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
height: 60px;
padding-left: 10px;
padding-right: 16px;
border-radius: 0;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .form-inline {
display: inline-block;
}
.navbar .nav li {
position: relative;
}
.navbar .nav li a {
color: #888;
}
.search-box {
float: center;
}
.search-box input {
float: center;
border-color: #dfe3e8;
border-radius: 20px !important;
box-shadow: none;
}
.search-box .input-group-addon {
float: center;
min-width: 35px;
border: none;
position: absolute;
background: transparent;
right: 0;
z-index: 9;
padding: 7px;
height: 100%;
}
.search-box i {
color: #a0a5b1;
font-size: 19px;
}
.navbar .nav .btn-primary, .navbar .nav .btn-primary:active {
color: #fff;
background: #33cabb;
padding-top: 8px;
padding-bottom: 6px;
vertical-align: middle;
border: none;
}
.navbar .nav .btn-primary:hover, .navbar .nav .btn-primary:focus {
color: #fff;
outline: none;
background: #31bfb1;
}
.navbar .navbar-right li:first-child a {
padding-right: 30px;
}
.navbar .nav-item i {
font-size: 18px;
}
.navbar .dropdown-item i {
font-size: 16px;
min-width: 22px;
}
.navbar ul.nav li.active a, .navbar ul.nav li.open > a {
background: transparent !important;
}
.navbar .nav .get-started-btn {
min-width: 120px;
margin-top: 8px;
margin-bottom: 8px;
}
.navbar ul.nav li.open > a.get-started-btn {
color: #fff;
background: #31bfb1 !important;
}
.navbar .dropdown-menu {
border-radius: 1px;
border-color: #e5e5e5;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar .nav .dropdown-menu li {
color: #999;
font-weight: normal;
}
.navbar .nav .dropdown-menu li a, .navbar .nav .dropdown-menu li a:hover, .navbar .nav .dropdown-menu li a:focus {
padding: 8px 20px;
line-height: normal;
}
.navbar .navbar-form {
border: none;
}
.navbar .dropdown-menu.form-wrapper {
width: 280px;
padding: 20px;
left: auto;
right: 0;
font-size: 14px;
}
.navbar .dropdown-menu.form-wrapper a {
color: #33cabb;
padding: 0 !important;
}
.navbar .dropdown-menu.form-wrapper a:hover{
text-decoration: underline;
}
.navbar .form-wrapper .hint-text {
text-align: center;
margin-bottom: 15px;
font-size: 13px;
}
.navbar .form-wrapper .social-btn .btn, .navbar .form-wrapper .social-btn .btn:hover {
color: #fff;
margin: 0;
padding: 0 !important;
font-size: 13px;
border: none;
transition: all 0.4s;
text-align: center;
line-height: 34px;
width: 47%;
text-decoration: none;
}
.navbar .social-btn .btn-primary {
background: #507cc0;
}
.navbar .social-btn .btn-primary:hover {
background: #4676bd;
}
.navbar .social-btn .btn-info {
background: #64ccf1;
}
.navbar .social-btn .btn-info:hover {
background: #4ec7ef;
}
.navbar .social-btn .btn i {
margin-right: 5px;
font-size: 16px;
position: relative;
top: 2px;
}
.navbar .form-wrapper .form-footer {
text-align: center;
padding-top: 10px;
font-size: 13px;
}
.navbar .form-wrapper .form-footer a:hover{
text-decoration: underline;
}
.navbar .form-wrapper .checkbox-inline input {
margin-top: 3px;
}
.or-seperator {
margin-top: 32px;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.or-seperator b {
color: #666;
padding: 0 8px;
width: 30px;
height: 30px;
font-size: 13px;
text-align: center;
line-height: 26px;
background: #fff;
display: inline-block;
border: 1px solid #e0e0e0;
border-radius: 50%;
position: relative;
top: -15px;
z-index: 1;
}
.navbar .checkbox-inline {
font-size: 13px;
}
.navbar .navbar-right .dropdown-toggle::after {
display: none;
}
#media (min-width: 1200px){
.form-inline .input-group {
width: 300px;
margin-left: 30px;
}
}
#media (max-width: 768px){
.navbar .dropdown-menu.form-wrapper {
width: 100%;
padding: 10px 15px;
background: transparent;
border: none;
}
.navbar .form-inline {
display: block;
}
.navbar .input-group {
width: 100%;
}
.navbar .nav .btn-primary, .navbar .nav .btn-primary:active {
display: block;
}
}
.B{
margin-top: 0px;
height: 40px;
width:65px;
float: top;
margin-top: 10px;
display:inline-block;
}
.C{
display:inline-block;
}
</style>
<script type="text/javascript">
// Prevent dropdown menu from closing when click inside the form
$(document).on("click", ".navbar-right .dropdown-menu", function(e){
e.stopPropagation();
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-expand-lg navbar-light">
<div class="navbar-header d-flex col"><img src="logo.png" class="B" alt="logo">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<form class="navbar-form form-inline">
<div class="input-group search-box" align="center">
<input type="text" id="search_bar" class="form-control" placeholder="Search" align="center">
<span class="input-group-addon"><i class="material-icons"></i></span>
</div>
</form>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Login</a>
<ul class="dropdown-menu form-wrapper">
<li>
<form action="/examples/actions/confirmation.php" method="post">
<p class="hint-text">Sign in with your social media account</p>
<div class="form-group social-btn clearfix">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
<div class="or-seperator"><b>or</b></div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<input type="submit" class="btn btn-primary btn-block" value="Login">
<div class="form-footer">
Forgot Your password?
</div>
</form>
</li>
</ul>
</li>
<li class="nav-item">
Sign up
<ul class="dropdown-menu form-wrapper">
<li>
<form action="/examples/actions/confirmation.php" method="post">
<p class="hint-text">Fill in this form to create your account!</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the Terms & Conditions</label>
</div>
<input type="submit" class="btn btn-primary btn-block" value="Sign up">
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Assuming here that you like to have the placeholder in the input field in the center.
If this is the case, try:
text-align: center;
Just place the input field within a block element and set that parent element to have text-align:center;.
That way you can control where you want the item to be positioned relative to the div (block element)
the navbar containing the form element should center its child elements.
.navbarCollapse{
text-align: center;
}
Use a different id for label and different id for textfield. Then you can easily manage them through css.
Related
I am trying to create a dropdown menu from "about us" but there seems to be some color unabling to give a proper dropdown. On the navigation bar there's a block of red color next to the "Home" button. Also when i hover on the "About us" button there are again red color visible therefore not aligning the dropdown menu links. Can someone explains how to remove the additional color? Here's my code:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<br>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: TIMES ROMAN;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #330000;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
<body style="background-color:#C0C0C0">
<div class="topnav">
<img src="D1.jpg" height="70" width="120" align="left"><br>
Home
<div class="dropdown">
<button class="dropbtn"><a class="active">About us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
</div>
<div class="row">
<div class="column">
Who are we?
What do we do
Project aims/goals
History
</div>
</div>
</div>
</div>
Contact ✆
Gallery 📸
Our services
Policy
Sign Up
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</body>
</html>
The way you code your css is different then how you have the html structure.
<a class="active"><button class="dropbtn">About us <i class="fa fa-caret-down"></i></button></a>
Check the above line and replace it in your code.
Wrap your button element inside a (anchor) tag.
So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
Currently, the ‘Active’ class is seen on the FAQ and it creates a misleading impression Example. As of now, the hovering still exists in White. I want to achieve where An active element will be in White and display accordingly when the user clicks Example. I have provided my .html and .css, however, the provided snippet output is inaccurate. Please use your preferred software such as Visual Studio, etc. Thank you.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/mainCSS.css" />
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<!-- -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-image"></i>
Portfolio
</a>
</li>
<li class="active">
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<!-- -->
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Sidebar 1 -->
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Minimise Sidebar</span>
</button>
</div>
</nav>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
Update 1
The following result is correct https://ibb.co/phP4c8d, however how do I make it White for the remaining elements? It's something like this https://codepen.io/gearmobile/pen/bByZdG. Correct me if I'm wrong but I believe it requires a JavaScript.
i dont know if i understood your question but i think what you want is this,
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}
I am trying to make a menu appear from right to left by giving it a negative right position and from jQuery on clicking on a span it should edit the position right to zero but when i click nothing happenes
$(document).ready(function() {
$(".run_menu").click(function() {
$(".menu").animate("right", "0");
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(data:image/jpeg;base64,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);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span> <!--menu should appear when click on it -->
<!--Open Menu on click-->
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>
Your code has no .run_menu. Add a button and your .animate function is wrong:
$(".menu").animate({
"right": 0
}, 1000);
Your <span> actually has the wrong class name:
<span class="runmenu">menu</span>
Which should be:
<span class="run-menu">menu</span>
Also, the menu is not accessible because of a wrong z-index. Kindly fix that.
Working Output: http://output.jsbin.com/salutajuna
Please click on the learn more.
I am trying to make a menu appear from right side by jQuery animation by clicking on a span which have runmenu class but it does not work , I made the same class for a button and it worked fine , what is the problem here and why it works for button only?!
$(document).ready(function() {
$(".runmenu").click(function() {
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>
It's all about z-index property and nothing wrong in your javascript. Your span.runmenu wasn't clickable because the navbar2 block was positioned over the span. Change the css and get the problem resolved.
give
.runmenu {
z-index: 999;
cursor: pointer;
}
.navbar .navbar_two {
z-index: 0;
}
See the fiddle
Preview
$(document).ready(function() {
$('span.runmenu').click(function() {
console.log("ok");
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.runmenu {
z-index: 999;
cursor: pointer;
}
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
z-index: 0;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
I did the same a few months ago, the best way is to insert the span inside a div and encourage div.
$(".animamenu").click(function () {
$(".animamenu").animate({
"right": 0
}, 1000);
});
html:
<div>
<i class="fa fa-bars fa-lg"></i>
<div class="animamenu">
<span class="runmenu">menu</span>
</div>
</div>