I have this code with a button:
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: none;">
<li><?php echo $_menu ?></li>
</ul>
When the button is clicked I'd like to use this other code:
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: block;">
<li><?php echo $_menu ?></li>
</ul>
Use jquery to do your job:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify">Link/Button</i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: none;">
<li>Menu</li>
</ul>
<script>
$(document).ready(function(){
$(".btn").click(function(){
if(($(".mobilemenu").css("display"))=='none'){
$(".mobilemenu").css("display","block");
}else{
$(".mobilemenu").css("display","none");
}
})
});
</script>
</body>
</html>
if you click the link <a></a> it will change <ul></ul> display none to block.
Related
I'm trying to learn Asp.Net Core MVC using .net 5 with the pre-built, scaffolded razor identity pages. I'm getting this rendered result when I click login or register from the sticky header. How do I format the (razor) login page(s) to start below the sticky header? The sticky header is from a bootstrap theme that worked fine prior to the scaffolled pages. I did not touch the css code as I don't know what I'm doing there.
Razor page under sticky header
The Login Page looks like this...
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<div mt-3>
<h1>#ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
#{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See this article
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="#Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
#foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account">#provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
This is the _Layout Code
<!DOCTYPE html>
<!--Home Layout Page-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewData["Title"] - SRP</title>
<link href="~/css/style-liberty.css" rel="stylesheet" />
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.countup.js"></script>
<script src="~/js/jquery.magnific-popup.min.js"></script>
<script src="~/js/jquery.waypoints.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/theme-change.js"></script>
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" asp-area="" asp-controller="Main" asp-action="Index">
<span>THIS IS THE HOME PAGE</span>
</a>
</h1>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa icon-expand fa-bars"></span>
<span class="fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Services">Services</a>
</li>
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="blog.html" class="drop-text">Blog Posts</a>
<a class="dropdown-item" href="blog-single.html" class="drop-text">
Blog
Single post
</a>
</div>
</li>*#
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="error.html" class="drop-text">404</a>
<a class="dropdown-item" href="contact.html" class="drop-text">Contact</a>
<a class="dropdown-item" href="landing-single.html" class="drop-text">Landing page</a>
</div>
</li>*#
</ul>
<ul class="navbar-nav search-right mt-lg-0 mt-2">
<li class="nav-item mr-3" title="Search">
<a href="#search" class="btn search-search">
<span class="fa fa-search" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary d-none d-lg-block btn-style mr-2" asp-area="" asp-controller="Home" asp-action="ContactUs">Contact Us</a>
#*<a href="contact.html" class="btn btn-primary d-none d-lg-block btn-style mr-2">
Contact Us*#
</a>
</li>
</ul>
<partial name="_LoginPartial" />
<!-- //toggle switch for light and dark theme -->
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-sm-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
<a class="close" href="#url">×</a>
</form>
</div>
</div>
<!-- /search popup -->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<span class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</span>
</label>
</div>
</nav>
</div>
</nav>
</div>
</header>
<!--/header-->
<div class="container-fluid bod-2">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<!-- footer-66 -->
<footer class="w3l-footer-66">
<section class="footer-inner-main">
<div class="footer-hny-grids py-5">
<div class="container py-lg-4">
<div class="text-txt">
<div class="row newsletter-grids-footer">
<div class="col-lg-6 newsletter-text pr-lg-5">
<h3 class="hny-title two">Newsletter</h3>
<h4>
Sign up for our monthly newsletter to get the latest news, volunteer opportunities,
</h4>
</div>
<div class="col-lg-6 newsletter-right">
<form action="#" method="post" class="footer-newsletter">
<input type="email" name="email" class="form-input" placeholder="Enter your email..">
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</div>
<div class="right-side">
<div class="row sub-columns">
<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
<h2>
<a class="navbar-brand" href="index.html">
<span>Capture & Response</span>
</a>
</h2>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<p class="pr-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur hic odio voluptatem tenetur consequatur.Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<div class="columns-2">
<ul class="social">
<li>
<span class="fa fa-facebook" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-linkedin" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-twitter" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-google-plus" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-github" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Our Services</h6>
<div class="mid-footer-gd sub-two-right">
<ul>
<li>
<span class="fa fa-angle-double-right mr-2"></span> About
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span> Services
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span> Car Wash
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Electrical system
</li>
</ul>
<ul>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Tire and wheel
</li>
<li>
<a href="#">
<span class="fa fa-angle-double-right mr-2"></span>Help
Orphan
</a>
</li>
<li><span class="fa fa-angle-double-right mr-2"></span>Career</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Contact US
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Contact Info</h6>
<div class="sub-contact-info">
<p>Address: 8436 Jasmine Parkway, Mountain View, CA 84043, United States.</p>
<p class="my-3">Phone: <strong>+24 1600-33-999</strong></p>
<p>E-mail:<strong> info#example.com</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-section">
<div class="container">
<div class="copyright-footer">
<div class="columns text-lg-left">
<p>© 2020 Capature & Response. All rights reserved.</p>
</div>
<ul class="columns text-lg-right">
<li>
Privacy Policy
</li>
<li>|</li>
<li>
Terms Of Use
</li>
</ul>
</div>
</div>
</div>
<!-- copyright -->
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
<span class="fa fa-long-arrow-up" aria-hidden="true"></span>
</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- /move top -->
</section>
</footer>
<!--//footer-66 -->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - SRP01 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Here is the style of fixed-top:
An element with position: fixed;does not leave a gap in the page where it would normally have been located.So that's why you get the rendered result.
If you want to format the (razor) login page(s) to start below the sticky header,try to remove class="fixed-top" in your _Layout <header id="site-header" class="fixed-top">.
If you don't want to remove fixed-top.You can also use the following style in _Layout to cover position: fixed; in .fixed-top:
<style>
.fixed-top {
position:initial;
}
</style>
I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<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 href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I made a navbar using bootstrap 4.
Now I want to add user avatar and name after sign in mentioned as circle. I have no idea how to do this. If you give or scratch it help me lot.
Now, my idea is when user sign in replace the navbar with a new navbar that have a place with avatar. Or replace the Sign in text with the avatar that is more complex to me. Second is need more css code I guess.
I load the navbar using following rule. Then there is a possibility to nav-placeholder when sign in button will be clicked.
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>
<div id="successfulModal">
</div>
<script>
$(function(){
$("#nav-placeholder").load("newnavbar.html");
$("#carousel").load("carousel.php");
});
</script>
My navbar code
<html lang="en">
<head>
<title>Matir Dokan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.modal-backdrop
{
background: none;
}
</style>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Matir Dokan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Object Type
</a>
<div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="toy">Toy</a>
<div class="dropdown-divider" ></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Furniture">Furniture</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Gift">Gift</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Household">Household</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Instrument">Instrument</a>
</div>
</li>
<script>
$(function(){
$(".menu1 a").click(function(){
$(".toggle1").text($(this).text());
});
});
</script>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
<script>
$(function(){
$(".menu2 a").click(function(){
$(".toggle2").text($(this).text());
});
});
</script>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<input class="form-control" type="hidden" id="object" value="">
<input class="form-control" type="hidden" id="material">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
</li>
<script type="text/javascript">
function add_form(name){
document.getElementById("object").value=name;
console.log(document.getElementById("object").value);
}
</script>
<li class="nav-item">
<a class="nav-link" href="#">Auction</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cart
</a>
<div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park <span class="dropdown-product-details">2 x $24.89</span>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<a class="btn btn-sm btn-secondary" href="cart.html">View Cart</a>
<a class="btn btn-sm btn-success" href="checkout-address.html">Checkout</a>
</a>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>
<!-- Modal content-->
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="signUpEmail" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="signUpPassword" name="password" placeholder="Password" onchange="check_pass()">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Confirm Password:</label>-->
<input type="password" class="form-control" id="signUpConPassword" name="password" placeholder="Confirm Password" onchange="check_pass()">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" >Sign Up</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function check_pass()
{
//alert(document.getElementById('signUpPassword').value);
if (document.getElementById('signUpPassword').value ==
document.getElementById('signUpConPassword').value) {
document.getElementById('signUpSubmit').disabled = false;
}
else
{
document.getElementById('signUpSubmit').disabled = true;
}
}
$('#signUpSubmit').click(function()
{
$('#signUp').modal('toggle');
//alert("signup completed");
var email=document.getElementById('signUpEmail').value;
var password = document.getElementById('signUpPassword').value;
$.ajax({
url: 'signup.php',
type: 'POST',
data: {
email: email,
password: password
},
success: function() {
//alert('Email Sent');
}
});
});
</script>
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<!--<label for="email" class="col-form-label">Email address:</label>-->
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<!--<label for="pwd" class="col-form-label">Password:</label>-->
<input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
put php function in navbar.
<?php
if ( isset($_SESSION['session name here']) ) { ?>
// here put navigation bar which you want to show after sig in.
<?php } else { ?>
// here put navigation bar which you want to show before sign in.
<?php } ?>
Now it sould work.
By default you can keep the avatr field hidden or display as none and on successful login you can unhide the avatar class
Something like this
if(result == "validUser"){
// If the user is valid add the class
$("#avatarImg").addClass("showAvatar");
$("#avatarImg").addClass("rounded-circle");
}
.showAvatar{display:block;}
I have this html page using meteor and fontawesome packages. When I open this page I have all the dropdown-menu opened and when I click one of the down arrow they all close. I make a lot of try to close those pannels, but all try stop the correct hide/display of the pannels.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>APP</title>
</head>
<body>
<div class="container">
{{> loginButtons }}
{{> userList }}
</div>
</body>
<template name="userList">
{{#if currentUser}}
<div id="userList" class = "panel panel-default">
<div class="panel-heading">Users</div>
<ul class = "list-group">
{{#each user in allUser}}
{{#with user}}
<li class="user list-group-item >{{> userOptions }}</li>
{{/with}}
{{/each}}
</ul>
</div>
{{/if}}
</template>
<template name="userOptions">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> {{username}} </a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil fa-fw"></i> Edit</li>
<li><i class="fa fa-trash-o fa-fw"></i> Delete</li>
<li><i class="fa fa-ban fa-fw"></i> Ban</li>
<li class="divider"></li>
<li><i class="fa fa-unlock"></i> Make admin</li>
</ul>
</div>
</template>
I see they have css display:block. On the console i try to write $(".dropdown-menu").toggle() and it work, but after i can't open the dropdown menu
Just remove open from <div class="btn-group open"> if you don't want it to open by default.
I realize this question has answers that have worked for some but try as I may, I cannot remove this annoying border.
I have tried the following CSS:
.nav-container{
border-width:0;
box-shadow:none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
Although the background-color does get set, the border remains.
Here is the site.
index.html:
html,
body {
background-color: aliceblue;
}
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title)
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon">
<i class="fa fa-stumbleupon-circle"></i>
</a> -->
<!-- Reddit (url, title)
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit">
<i class="fa fa-reddit-square"></i>
</a> -->
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
<!--navbar-collapse-->
</div>
<!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
There is a box shadow added by the bootstrap theme. The following rules will remove it as well as on the .navbar-collapse class when the nav is under 768px.
Note: you have a stray tag after the fa fa-user button and are (possibly) using normalize.css twice since Bootstrap3 uses a version of it all ready. See normalize.less.
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Before with box-shadow:
After removing the box-shadow:
Working Example:
/*FOR DEMO ONLY*/
html,
body {
background: aliceblue;
}
/*FOR DEMO ONLY*/
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="https://writers-tryst.com//img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
simply apply box-shadow: none; in navbar
You have several declarations for the CSS box-shadow property on the .navbar-default element. If you remove all of those the border will be gone.
The only solution that is working for me is inline css with !important property:
border: none !important; outline: none !important;
inside navbar-toggler:
<button class="navbar-toggler" style="border: none !important; outline: none !important;"
type="button" data-toggle="collapse" data-target="#collapsingNavbar">