I'm creating a navbar that displays a button when the screen size is below a certain width; just as you've seen with many other Bootstrap sides. When the button is displayed and clicked, the navigation links display in a vertical dropdown, which works as intended.
The problem comes when I try to close the dropdown by re-clicking the link. No matter what I do it remains open. After inspecting the live site, it looks like the class 'in' is added on the first click, but not removed on subsequent clicks (the toggle function). I'm at a loss for how to correct this, as I believe my links are correct in the header. Does anyone have any experience with this problem?
EDIT: As clarification, I understand that I could write a workaround in my javascript document, but I don't want to go down that path if there is a more obvious solution. Thanks for helping out a beginner.
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js"> <!-- personal JS Script (Not Sure which is better) Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"> <!-- Font Awesome Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet"> <!-- Personal CSS Stylesheet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js"></script> <!-- Personal JS Script -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script> <!-- Bootstrap Script -->
<title><?echo get_bloginfo( 'name' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="main contain">
<nav class="navbar navbar-inverse hold-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav-logo2" href="<?php echo get_bloginfo( 'wpurl' ); ?>"></a>
</div>
<div class="collapse navbar-collapse pull-right header-text" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Marketing Campaigns</li>
<li>Donor Activation</li>
<li>Lobbying</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>
Your code Seems working fine ,The in class generated on click is a bootstrap class and after toogling it disapers .
What you can do put the external resourse js files such as jquery,bootstrap at first and then your custom js file at last ,may be something is conflicting between these js file thats why toogle function is not working
you can add the js reference file by maintaining the sequence like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js">
<script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js">
Related
How do i make a link to antoher page with asp.net MVC? I want to link to an page named overview through my homepage(index page). I have made an view function with my HomeController. When i click "Go To View" my overview page show up. But my hyperlink still dont work on my index page. Anyone have an idea?
Thanks!
Here are my controller
public IActionResult Overview()
{
return View();
}
Here are my hyperlink
Overview
here are my overview page i want to display
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
Layout = "~/Views/Home/Overview";
}
<h1>Overview</h1>
#RenderBody()
Code for my Layout Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<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 ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></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">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Why are you using IActionResult?
Try:
public ActionResult Overview()
{
return View();
}
and in view part remove the #RendorBody(), Layout = "~/Views/Home/Overview";
use this instead :
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
}
<h1>Overview</h1>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
About the static file 404 error, I think the issue is related to the file path.
I have created a new Asp.net core 3.1 applications on my side, and try to create a new layout page using your code, generally, the client-side library (such as JQuery and Bootstrap) was installed in the lib folder as below, but in your code, you want to load the js and css file from the vender folder,
So, if I using your code, the related JS and CSS file will show 404 error. Try to check the structure in the wwwroot folder, and load the Jquery and Boostrap from the lib folder.
In my sample, I'm using the default installed library, and install the font-awesome in the lib folder, so, my custom layout as below:
_CustomLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="~/css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<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 ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></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">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Code in the Home controller:
public IActionResult About()
{
return View();
}
public IActionResult OverView()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
Code in the About.cshtml page (using the default layout page):
#{
ViewData["Title"] = "About";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>About</h1>
Overview
Code in the OverView.cshtml page:
#{
ViewData["Title"] = "OverView";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
<h1>OverView</h1>
The result like this:
Can anybody tell me how to set up Font Awesome to work with a theme?
I have put this in my template file:
<div id="social-media-bar" class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2">
<i class="fa fa-linkedin-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-facebook-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-xing-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-twitter-square fa-3" aria-hidden="true"></i>
</div>
</div>
</div>
But there are no icons loaded. They aren't loaded in admin mode either but the IP menus have their FA icons as they should.
What am I doing wrong? Are some LESS entries necessary in my theme?
Think I got it - I just have added this line to theme.less:
#import "/Ip/Internal/Core/assets/admin/font-awesome/font-awesome.less";
I have used Bootstraps CDN in the head now:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Best way to add css in Impresspages is by using ipAddCSS in you theme header before ipHead(). Thats the same way you can add css to plugins.
For example:
<head>
<?php ipAddCss('Theme/AHS/assets/ahs.css'); ?>
<?php echo ipHead(); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Wanted a horizontal menu for my application. Used Bootstrap to create it using the
this http://www.bootply.com/113314 example. it is not working though. Also need help to understand how the button identifies the appropriate list without specifying id or name anywhere given the fact that there are more than one in the document
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div align="center">
<a href="home.erp">
<img title="Home" class="img-rounded" src="images/empireSmall.png">
</a>
</div>
<div align="right">
<button class="btn btn-danger" onclick="logout()">Logout</button>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Administration
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> Invoice Application</li>
<li> Karate Student</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
System
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> User Application</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just to confirm for anyone else finding the same issue - ensure jQuery is referenced prior to Bootstrap JavaScript (e.g. bootstrap.min.js), as this is a dependency.
How to create following nav/brand logo responsive behavior based on the standard bootstrap nav code, please?
Illustration: Responsive nav behavior
Code: http://www.bootply.com/8suUu6W5ZB#
Thanks for any help!
I have not used bootply before, So I don't know whether tags for html, body is included by bootply automatically. But I could not see those tags in your html, but could see styles for those. Basic structure of the html with bootstrap would like this. I have included a nav bar for you. So use this as a template to work on your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=none">
<title>Trying out bootstrap </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">A WV Gates Corporation</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Make sure to include the files of bootstrap and jquery in the appropriate paths!
I found the menu bar will overwrite some content of first line. When I click the dropdown 'first', it will locate to the first list item, but it was overwritten by menu bar. I've try apply one solution Posted in jsbin, but failed.
original html is here.
<!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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Bootstrap theme</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>first</li>
<li>end</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<ul>
<li id="first">first</li>
<li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li id="end">end</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
SOLUTION demo (as answer)
Try this:
DEMO
Use padding top in the <li>
<li id="first" style="padding-top: 50px;">first</li>
Protip: Read the docs!
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.