How to display scrollbar in list after certain dimension? - html

I have this list:
<div class="col-lg-3 col-md-6">
<ul class="nav nav-pills nav-pills-primary nav-pills-icons flex-column">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#link10">
<i class="tim-icons icon-istanbul"></i> Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#link11">
<i class="tim-icons icon-settings"></i> Settings
</a>
</li>
</ul>
</div>
I would like to show a scrollbar when the list reach a specific number of items eg: 3, how can I do this?
You can check the list above working in Vertical Tabs With Icons example here.

Something like this
.nav {
display: block;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
height: 360px;
width: 150px;
overflow-y: auto;
}
ol li, ul li {
color: #fff;
height: 118px;
}

Related

CSS nav styling

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>

My Navbar links are showing up under my navbar

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 to set fixed positions in dropdowns respecting the original layout?

I'm creating a header that will be composed by different redirection links, and some of the cases will be some dropdown elements composed by several links that will be shown when clicking on the main link.
here si my html
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" v-on:click="displayAnimalList = !displayAnimalList">PERSONAL FORM</a>
<ul class='dropdown-menu' v-show="!displayAnimalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayServiceList = !displayServiceList">SERVICES</a>
<ul class='dropdown-menu' v-show="!displayServiceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayContactList = !displayContactList">CONTACT</a>
<ul class='dropdown-menu' v-show="!displayContactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
and here mi css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
I have it laid out as it should be, but the problem arises when I click on the drop-down menus, which pushes the rest of the elements of the header and unlays them. I have tried to introduce an absolute position to the elements that make up the header but it does not respect the original layout as shown in the following link
https://codepen.io/carlosurra/pen/YzqXjdP
Greetings and thanks in advance for your time and help
You should be able to fix that by adding position: relative; to the class .nav-items and position: absolute; to the class .dropdown-menu
here is the updated css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
position: relative;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
position: absolute;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}

Unordered-list inline vertical alignment and responsive spacing

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;
}

Arrange nav tabs to single row in css/html

Im want to arrange all the nav tabs in a single row (in line with hr element).
I dont want any space between hr element and tabs.
After updating margin-top, for Technical Documentation tab, it seems fine, but for 1st tab , Products tab, still gap seems to be there between the hr.
Gap in the 1st tab
I have the below code like:
UPDATED:
<div class="container">
<ul class="nav nav-tabs search-results-navtab">
<li class="active search-list-class">
<a data-toggle="tab" href="#products">Products <br/></a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#multilayer_inductors_series"> Technical
<br/>Documentation</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#molding_inductors_series">Component
<br/> Selector</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
</li>
</ul>
<hr class="search-hr">
</div>
The Css is as:
.search-hr {
margin-top: 0px;
}
.search-results-navtab {
padding-left: 0px;
margin-left: 32px;
margin-right: 70px;
margin-bottom: 1px;
list-style: none;
border: 0px !important;
background-color: white;
}
.search-list-class {
padding-right: 100px;
}
Solution #1
Remove the margin-top value from the hr element.
hr {
margin-top: 0px;
}
This will retain the margin-bottom value which you may need for spacing.
Solution #2
Alternatively, and I would recommend this, remove the hr element and declare border-bottom on a containing parent element of your list items (li), like .nav, then declare a margin-bottom property if you need bottom spacing.
<div class="container">
<ul class="nav nav-tabs search-results-navtab">
<li class="active search-list-class">
<a data-toggle="tab" href="#products">Products <br/></a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#multilayer_inductors_series"> Technical
<br/>Documentation</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#molding_inductors_series">Component
<br/> Selector</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
</li>
</ul>
</div>
Additional Styles Declared:
.nav {
border-bottom: 1px solid #ccc;
margin-bottom: 10px; /* adjust as per requirement */
}