I'm running an ASP.NET Core 7 app that I've written. I've pretty much used the basics from a basic setup of a new ASP.NET Core app in Visual Studio 2022. When I run it locally, everything is working as intended. I've added a bit of code to the _LogonPartial.cshtml.
When I run it locally, I got everything running correctly.
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">BWDWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Users/Pictures">Pics</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" title="Manage" href="/Identity/Account/Manage">Hello wallace.b.mcclure#gmail.com!</a>
</li>
<li class="nav-item">
<form class="form-inline" method="post" action="/Identity/Account/Logout">
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8GZuOj8G4EJKpkUu0YwgwQUebAMzZHDWLJlpWl8yStyoJraAREx1GrNPYY-OwqrmMSnrko3UQ-8LV4XSBT4TFtwdJnNSfUl1vLWrh6CpIC9kyMbzvpUDVoOJDOQk5Tr7GmF3wdADP5Lo3OOmEsxcRl9Vl5u3bGFAUh52JGx2mgRVH9sFp3pcKSSmbaupMkq3wA" /></form>
</li>
</ul>
</div>
</div>
</nav>
</header>
When I run it in azure, I get this:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">BWDWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Users/Pictures">Pics</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
Here is the content of my _LogonPartial
#using Microsoft.AspNetCore.Identity
#using BWDWeb.Models
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
<ul class="navbar-nav">
#if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello #User.Identity?.Name!</a>
</li>
<li class="nav-item">
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Page("/", new { area = "" })" method="post" >
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
I don't know why my code isn't running on Azure. I'm trying to figure out why. I've rebuilt, I've redeployed, and I've had no success.
I've created another web app in VS 2022, and deployed it, and everything works properly. I think the problem is somewhere in my code, but danged I can't see what I've mucked up and I don't know where to start. Any suggestions on how to get my _LogonPartial working again are appreciated.
I don't know why, but going into my publish settings, checking "Remove additional files at destination", and then redeploying has solved this problem for the moment. I did add the tagHelpers directives as suggested by #Mike Brind's link and redeployed previously, but that in and of itself didn't solve the problem. Doing both together seems to have solved the problem, though I do not know that adding the taghelpers lines into several files really did anything.
I also did a "clean" somewhere in the process this morning, but I think I had tried that yesterday to no avail. hopefully, someone can better explain what happened. Hopefully, the change the deployment settings and deleting the files will help someone else.
Related
I am new to bootstrap , how can i add name and image in right of navbar as shown in image. On hovering of image logout should be display, how can i do it using bootstrap in mvc project
Refer to bootstrap navbar
Below is a demo:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
UserName
<img class="img-thumbnail rounded-circle" style="width: 50px; height: 50px;" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg">
</form>
</div>
</nav>
Result:
<nav>
...
<span class="float-right">
UserName
<img class="img-thumbnail rounded-circle" src="..." alt="">
</span>
</nav>
I am have scaffolded a NavBar in a .Net Core application using Bootstrap 4. It looks like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
Because there are numerous items in the Menu, I have changed navbar-toggleable-sm to navbar-toggleable-lg so that the hamburger menu appears at a wider media breakpoint and "Login" does not sit on top of the menu at widths smaller than lg. While this works fine for displaying the hamburger menu, the "Login" menu item continues to show as the media width is being narrowed until the small size is reached.
How can I ensure that the _Login disappears under the hamburger menu at media widths of smaller that lg?
Currently there is no class name called navbar-toggleable-lg in bootstrap 4.3.1. It has been replaced with navbar-expand-lg. So remove navbar-toggleable-lg.
Now if you use navbar-expand-lg then you also have to use d-lg-inline-flex flex-lg-row-reverse instead of d-sm-inline-flex flex-sm-row-reverse.
So your full navbar code should be as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-lg-inline-flex flex-lg-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<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=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
Is there anyone that has used a similar menu style to Spotify? https://www.spotify.com/se/
I would like to have the menu cover whole page....
Example
Im using Bootstrap 3.
Has anyone done something similar?
You need to modify this code as you want..DEMO
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse"
data-target="#example-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="#">menu</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Terrier</li>
<li>Labrador</li>
<li>Pitbull</li>
<li>German Shephard</li>
<li>Chihuahua</li>
<li>Beagle</li>
</ul>
</li>
<li class="dropdown">
Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Persian</li>
<li>Siamese</li>
<li>Ragdoll</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
</li>
<li class="dropdown">
Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Monkey</li>
<li>Lemur</li>
<li>Gorilla</li>
<li>Chimpanzee</li>
</ul>
</li>
<li class="dropdown">
Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Boa</li>
<li>Monitor Lizard</li>
<li>Comodo Dragon</li>
<li>Iguana</li>
<li>Alligator</li>
</ul>
</li>
</ul>
</div>
</nav>