I would like to move this h5 element such that it always hangs in the middle of the navbar. How can I control that. This is the HTML from a shared layout file that will be shared across all pages. Thank you
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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-controller="Home" asp-action="Index">ProjectX1</a>
<h5 class="display-6 navbar-text">#ViewData["NavbarTitle"]</h5>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial.cshtml" />
</div>
</div>
</nav>
<div class="w-100 d-flex justify-content-center " >
<h5 class="display-6 navbar-text text-center">#ViewData["NavbarTitle"]</h5>
</div>
You only need to remove navbar-collapse of <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">...</div>.
you can use flexbox:
nav > .container{
display: flex;
justify-content: space-between;
}
Related
I'm struggling with the problem of a transformed div overlapping a bootstraped navbar, illustrated below. Does anyone know why this could be happening?
It happens in safari but not in Firefox or Chrome. It also doesn't happen when there are no transforms applied to the div.
I'm using bootstrap 4 and tailwind.css. I've included the code below. Thanks.
Grateful for any pointers, thanks.
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
nav item
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
Can you please check the below code link? Hope it will work for you. You have to add position and z-index in the parent element .place-self-center and its child element .place-self-center .bg-transparent.
Please refer to this link: https://jsfiddle.net/yudizsolutions/Lj482t1p/2/
I want to center align the navigation links from Bootstrap but since I'm not using the list structure, all solutions don't work.
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>
I tried everything: text-center, text-align: center, justify-content-center and nothing works.
Your HTML is invalid. ul can only have li as children. Try using a div instead.
Then use the flexbox helper classes available to you in BS4.
<div class="navbar-nav d-flex justify-content-center">
Then we just make the menu full width by adding flex:1. The reason the list items wouldn't center is because the menu was not full width and itself, left aligned.
View in Full Page mode.
.navbar-nav {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon">Toggle</span>
</button>
<div class="collapse navbar-collapse " id="navbarHeader">
<div class="navbar-nav d-flex justify-content-center">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</div>
</div>
</nav>
</div>
</section>
Just CSS code added. hope this help you.
.navbar-nav {
text-align: center;
width: 100%;
float: left;
display: inline-block;
}
.nav-link {
float: none;
display: inline-block;
padding:0 10px;
}
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>
Basically I have 3 main components: 1 navbar, 1 content div separated in sections and 1 footer.
I've finally made my design responsive with for the first two components but not for the footer.
my content container (parent) have the class h-100 that sets the height to 100% child also have a 100% value only problem is that when I use inspector I see my parent container recognized as having a the size of the screen and because of that the footer is placed after the first section (there's 3 or more sections that should be 3 or more times the height of the screen minus the navbar)
here is a reproduction of the resulting html (I'm normally using Angular)
#media (max-width: 979px) {
.section {
padding-top: 0px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 60px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hello
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hi
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hey
</div>
</div>
</div>
<div class="row">
Footer is not placed correctly
</div>
Your issue is that your are specifying height 100% for the container, but 100% of what? In your case the body tag, but the body gets it's height from the size of your content(which on full screen is about 1000px for the first content box), then you also specify 100% height for each of your content boxes. Again 100% of what? The container, which is 1000px is this example. So the footer jumps up after what it thinks the size of page, but then each of the additional content boxes also get that same height, which leads to your weird situation.
In short if you need to keep the 100% height on the container, try adding overflow: auto to the container. Otherwise you could remove the 100% height rule from the container.
here is my solution.
please tell me if it is not a best practice.
every row is wrapped into div with h-100 as class and it works
I also removed container-fluid
HTML
#media (max-width: 979px) {
.section {
padding-top: 48px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 48px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hello
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hey
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
ola
</div>
</div>
</div>
<div class="row">
Footer is placed correctly.
</div>
Div above navbar is not in the top of body (Screenshot).
source:
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<div class="navbar navbar-inverse" style="background-color:#026;" data-spy="affix" data-offset-top="197">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("ՏԵՍԱԿՆԵՐ", "Index", "Home")</li>
<li>#Html.ActionLink("ՕԳՏԱԿԱՐ ՆՅՈՒԹԵՐ", "About", "Home")</li>
<li>#Html.ActionLink("ԿԼԻՆԻԿԱՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԺԻՇԿՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ՆՈՐՈՒԹՅՈՒՆՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԼՈԳ", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
.affix {
top: 0;[enter image description here][1]
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
I even tried using JavaScript but it doesn't help. I suppose Bootstrap doesn't let me to do that.
Have you tried adding position:absolute or position:fixed to the .container-fluid element's css?
(https://developer.mozilla.org/en-US/docs/Web/CSS/position)
I am unable to reacreate your problem. It should work, since it's pretty much the example from w3schools.
It might help if you provided a minimal working example of your code as a stack snippet or on something like bootply or jsfiddle.
I am assuming you want your navbar to be at the bottom of the page, and you would like the background color to fill the whole item page (coded area).
To fix this...
Add a wrapper div (call it .bg or something) directly inside the body tag
Set the .bg class to width of 100 (w-100)
Make sure the navbar is not in your .container class, but still inside the .bg wrapper class
Here below I made a simple bootstrap webpage with a background color, and a navbar at the bottom.
I did not use css for brevity, instead I used bootstrap included classes for background color, margins, etc...
If you want the whole webpage to be one color, set the html tag css to
background-color: #somecolor;
Good Luck!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="bg bg-danger">
<div class="container-fluid">
<div class="row w-100">
<h4>Bootstrap Afix Example</h4>
</div>
<div class="row w-100 mt-5">
<button type="button" class="btn-primary">button :)</button>
</div>
</div>
<nav class="navbar navbar-default sticky-top navbar-light mt-3 w-100 bg-secondary">
<ul class="nav mr-auto mt-1 mb-1">
<li class="nav-item">
Home
</li>
<li class="nav-item ml-3">
About
</li>
</ul>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
I'm working on a Bootstrap 4 project where I have a nav bar with a centered logo and tagline, then some links to the left and right. It works pretty much as I would like, only ideally I would like the logo to stay centered after the nav links collapse.
Here is the code I have so far:
<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
<div class="container-fluid ">
<div class="d-flex flex-column text-center order-lg-2">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/350x150" alt="">
</a>
<h2 class="tagline navbar-text">eco freindly clothing</h2>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
<ul class="nav navbar-nav ml-auto">
<a class="nav-link" href="#">our ethics</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">shop</a>
</ul>
</div>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="">instagram</a></li>
<li class="nav-item"><a class="nav-link" href="">facebook</a></li>
<li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
</ul>
</div>
</div>
</nav>
Currently after the links collapse the navbar toggle is on the right and logo and tagline on the left. How can I retain the logo and tagline in the center?
Here is a codeply
Thanks for any help!
The flexbox parent of the brand, logo, navbar toggler and 2 collapsable menus is .container-fluid, not the <nav>. So you need to do flex-direction: column; on small screens and flex-direction: row; with justify-content: space-between; on larger screens.
You can use bootstrap built-in classes for that too.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
...
</div>
</nav>
fiddle: http://jsfiddle.net/aq9Laaew/144985/ (don't want to register with codeply)
You can do this really simply by creating a "centered" class for the div containing your logo and header text.
.centered {
margin:auto;
display:block;
}
Is this what you had in mind? See the codepen below.
https://www.codeply.com/go/nss8DJRYN3