I would like to reproduce navigation control with tabs like this:
with bootstrap and with (https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/navs/) - material design bootstrap...
Is there a way to put tab bars below the navbar-brand items?
I found the solution: I inspect the CSS of the library that has this and try to mimic it.
The end solution:
CSS
.my_nav {
height: auto;
display: flex;
flex-wrap: wrap;
}
.my_div {
min-height: 56px;
height: auto;
display: flex;
flex: 1;
}
.my_content {
margin: 0;
flex: 0 0 100%;
}
.nav-tabs .nav-link {
padding: 0.55em 1.15em;
}
html
<nav class="navbar navbar-expand my_nav ">
<div class="my_div">
Home
<ul id="nav-mobile" class="navbar-nav ml-auto right">
<li class="nav-item"><a class="nav-link ">Wellcome {{ user.username }}</a></li>
<li class="nav-item"><a class="nav-link ">Log Out</a></li>
</ul>
</div>
<div class="my_content">
<ul class="nav nav-tabs ">
<li class="nav-item"><a class="nav-link" >Test 1</a></li>
<li class="nav-item"><a class="nav-link" >Test 2</a></li>
<li class="nav-item"><a class="nav-link active" >Test 3</a></li>
</ul>
</div>
</nav>
Related
I am recreating Apple page from Youtobe video to learn more css and html. I encountered a problem with a styling of navigation.
My problem is that the nav section is too wide. As you can see on a first photo icons are a lot closer and in the middle. Not wide on a lenght of side as in photo 2(my code).
This is how it sholud look like:
And How it looks:
I have the same code as a in video.
Link(Styling nav about 17:30):
https://www.youtube.com/watch?v=DEpF1nNz1l0&t=183s
This is mine:
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
<header>
<div class="cointainer">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-botton"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class="nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item">
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Sport
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
I added a width of 80% to .nav and centered it in the .container class.
try adding the icons (I couldn't find them)
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}
a{
display: block;
text-decoration: none;
font-weight: bold;
color: white;
}
.cointainer {
max-width: 98rem;
padding: 0 2.2rem;
height: 100%;
display: flex;
align-items:center;
justify-content: center;
}
.nav {
width: 80%
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
<header>
<div class="cointainer">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-botton"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class="nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item">
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Sport
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
Should this div not display my two rows one on top of the other? or am I missing something?
the rows called 'tabs' and 'main' are displaying side-to-tide within the column('main' on the left), rather than tabs on top main below
Content div:
<div class='row content'>
<div class='col-12' style='display:flex; flex-direction:column; justify-content: center;'>
<div class='row tabs' style='align-items: flex-start; width:100%; '>
<ul class="nav nav-tabs" style='display:flex; flex-direction:row; position:absolute; right:0;'>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
</div>
<div class='row main' style='min-height:100px; width:100%;'>{{user.username}} 's profile </div>
</div>
</div>
CSS:
.content{
width: 103.5%;
min-height:50%;
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
background-color: #F3D5AE;
}
.tabs{
position: relative;
top:0%;
}
If I'm understanding correctly you really just want something like shown below. I'd suggest getting more familiar with the different utility classes bootstrap provides to avoid repetitive (and in many cases unnecessary) styles since your usage of flex and position etc isn't correct and could make your output cleaner in the process. Cheers
.example {
background-color: #F3D5AE;
}
.example2 {
padding: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row example'>
<div class='col-12'>
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Replies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">More</a>
</li>
</ul>
<div class="col-12 example2">
{{user.username}}'s profile
</div>
</div>
</div>
I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
How do I make the words stay on same line?:
This is my cshtml - they share the same class.
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Reservations" asp-action="Index">Reservations</a>
</li>
<li class="nav-item">
<span class="nav-text text-dark">Hello #User.Identity.Name!</span>
</li>
align-self will help to make text center of its height.
ul {
display: flex;
justify-content: space-between;
list-style: none;
align-items: center;
}
li.nav-item {
align-self: center;
}
<ul>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Reservations" asp-action="Index">Reservations</a>
</li>
<li class="nav-item">
<span class="nav-text text-dark">Hello #User.Identity.Name!</span>
</li>
</ul>
I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}