I create one the Nav and put the logo on the top left, as the logo size is bigger, all of nav item now place on top left, can I know how to move them into bottom / centre?
Here is nav bar code
<div class="full-width">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 align-items-start">
<img src="~/resources/images/projectLogo.jpg" alt="St Mary School" style="margin: 10px 10px 10px 10px">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index" style="align-self:flex-end">Lesson School Project</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 flex-grow-1" >
<li class="nav-item" >
<a class="nav-link text-dark" asp-area="" asp-controller="Main" asp-action="Index" >Lesson Search</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Main" asp-action="PureChart">Result Chart</a>
</li>
</ul>
</div>
</nav>
</div>
Thank you for help
replace align-items-start to align-items-center in nav tag.
Related
There was a problem with extra padding in the navbar after the site icon. Initially, the idea was to place links that are located to the left of the icon closer to the left edge using me-3, but then the icon of the site is shifted to the right, which I basically don’t need.Therefore, I have a question. Is it possible to make the same indents from the site icon and links without shifting this icon from the center or how to remove the indent between the icon and links on the right side of the navbar.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="scroll">
<div class="container-fluid">
<div class="collapse navbar-collapse order-1 order-lg-0 dual-collapse2" id="navbarNavAltMarkup">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#articles">기사들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#mission">우리의 임무</a>
</li>
</ul>
</div>
<a class="navbar-brand order-0" href="#">
<img src="img/marslogo.png" alt="" width="30" height="30">
</a>
<div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 dual-collapse2" id="navbarNavAltMarkup"
>
<ul class="navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">사진들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">문의하기</a>
</li>
</ul>
</div>
</div>
</nav>
I have a menu. When I click on the anchor link, page floats to the left about 50 pixels.
When I delete div which wrapped nav it don't helps.
What can I do?
Shifting effect
<div class="sticky-top container-fluid p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand px-3" href="#"><img src="img/logo_0.png" style="height: 2.5em" alt=""></a>
<button class="me-3 navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mx-3 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#ac">One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pages/service.html">Two</a>
</li>
</ul>
</div>
</nav>
</div>
I am trying to add the row before the nav bar, but after adding the row , it is not visible and the rows is covered by nav bar. How can I show the row before the Nav bar
<header id="header">
<div class=row>
The text is not visible here
</div>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header fixed-top" id="main-nav">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="container">
<img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
<a class="navbar-brand" href="/">MyCompany</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">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="text-light" style="position: fixed;">
The text is not visible here
</div>
you have to add a position to that div because it's overlaps with that header.
Class fixed-top is add to the nav element which sticks the navigating at top, and hides the above .row element.
You can Either remove the fixed-top class from navigation, if you dont need top fixed navigation
Add the .row element inside the navigation, which will fix the row at top of the navigation
I am new to Bootstrap and web development but I am trying to reorganize the default navbar that is generated with the execution of a blank asp.net core 2.2 web application. When this web app is generated there are nav-items that are floated to the left, but in this navbar I want to add another nav-item for log in and place it all the way to the right of the page similar to how many websites place their login links.
I have tried playing around with margins and padding in the container as well as in the navbar. When I would change the margins for the left and right side of the container it would just shift the entire navbar in one direction either left or right. I have also opened up and looked at the bootstrap.css in order to see how it works and trying to see if I could find useful information. I have also tried playing around with the different nav-bar classes.
//I tried playing around with margins in my css as such
.container{
padding-left: 0px;
padding-right: 0px;
}
//part of my layout page
<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">RazorPagesDemo</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 ">
<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="/Privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav flex">
<li>
<a class="nav-link text-dark" asp-area="" asp-
page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here I would like to make it so that my login nav-item reaches all the way to the right corner.
You could set style as position:absolute;right:0 to place it at the right of page:
<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">RazorPagesDemo</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 ">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Index">Home1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Privacy">Privacy1</a>
</li>
</ul>
<ul class="navbar-nav flex" style="position:absolute;right:0">
<li>
<a class="nav-link text-dark" asp-area="" asp-page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
As long as your navigation is inside .container it will be max-width: 1140px wide and centered because of margin-left: auto and margin-right: auto.
Try to use .container-fluid or remove container div so it will be full width "from left to right".
I've got a nav bar with a subtitle, the subtitle uses the technique from here:
Adding a subtitle to a Bootstrap Navbar
Unfortunately, when I added the sub-title, I lost the right-alignment on my nav bar - meaning I need some items to be right aligned, and they were, but not anymore since adding the sub-title.
Any idea how I could combine nav-bar sub-title with right-align?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto">
... a bunch of li/a here to represent left aligned items
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-item-right">
<a id="refresh-button" class="nav-link" href="#">Refresh</a>
</li>
<li class="nav-item dropdown dropdown-item-right justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<span id="account-info-header" class="dropdown-item-text"></span>
<a class="dropdown-item">Settings</a>
<a class="dropdown-item" href="/auth/v1/logout">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>
I think that right-alignment of "Refresh" and "Account" were provided by the "mr-auto" attribute on:
<ul id="navbar-section-list" class="navbar-nav mr-auto">
But sadly I have no idea why it stopped working with "flex"...
I tried adding a justify-content-end on the second ul.navbar-nav but it made no difference, still no right alignment.
here is the jsfiddle for your problem https://codepen.io/irinnahar/pen/JQamQy?editors=1000 you just need to add w-100 to your <div class="d-flex flex-column w-100"> class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column w-100">
<div class="d-md-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto">
... a bunch of li/a here to represent left aligned items
</ul>
<ul class="navbar-nav ">
<li class="nav-item dropdown-item-right">
<a id="refresh-button" class="nav-link" href="#">Refresh</a>
</li>
<li class="nav-item dropdown dropdown-item-right justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<span id="account-info-header" class="dropdown-item-text"></span>
<a class="dropdown-item">Settings</a>
<a class="dropdown-item" href="/auth/v1/logout">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>