I would like to add a down arrow for each li `at the right.
Here is an idea of the menu.
menu
How to I create the arrow, please? I have to use an image?
I can you provide my code below:
admin.component.html
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li [ngClass]="{ selected: selectedTab === 'market' }">
<a
routerLink="market"
(click)="selectElementMenu(); selectedTab = 'market'"
>
<i class="bx bx-grid-alt"></i>
<span class="links_name">Market</span>
</a>
</li>
<li [ngClass]="{ selected: selectedTab === 'currency' }">
<a
routerLink="currency"
(click)="selectElementMenu(); selectedTab = 'currency'"
>
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
</nav>
<router-outlet></router-outlet>
</section>
styles.css
.sidebar .nav-links {
padding: 0;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
height: 50px;
}
.sidebar .nav-links li a {
height: 100%;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
text-transform: uppercase;
}
.sidebar .nav-links li a:hover,
.selected {
background: #081d45;
}
You can consult my project below -> https://stackblitz.com/edit/angular-ivy-1sawka?file=src/app/admin/admin.component.html
You may use icons as font with adding to your project instead of using them separated images. I think best option for angular project is material icons.
angular material website
full icon list of material icons
You may also check for font awesome.
Related
My bootstrap dropdown Navbar menu acts strangely on small screens. As shown n the images below, hovering above dropdown menus pushes the other UL section below or to the side.
I struggle to figure out how to solve it so it can be displayed similarly to the way it on large screens.
My menu is composed of three sections.
Utilities (ul section that regroups Contact, Languages, LogIn, Search components)Brand+logoNavigation.
In my Sass file, I tried with the following code to displays the dropdown-menu on a higher z-index on small screens, the result remained the same.
#media (max-width: 576px) {
.dropdown-toggle ul {
z-index: 99;
}
}
Below you can find Navbar code and my styling.
I tried to keep it as short as possible.
Any advise on how I advance would be highly appreciated. .
<!-- Navbar-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid justify-content-between">
<!--Utilities Section-->
<ul class='navbar-nav flex-row components order-sm-2'>
...
<!--Search section--><li class="nav-item dropdown">
<a class="nav-link" href="/search/"><i class="fas fa-search" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
</i></a>
</li><!--End Search section--><!--Language section--><li class="nav-item dropdown">
<span class="nav-link dropdown-toggle badgeClass" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-globe" id="lang1">
</i>
<span class="badge rounded-pill bg-danger">{{LANGUAGE_CODE|capfirst}}</span>
</span>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton3">
...
<li class=""><a class="dropdown-item active" href="page_url" hreflang="{{ language_code }}">
{{ language.name_local }} ({{ language.code }})
</a></li> ...<li class="">...
</ul>
</li>
...Idem for
'User Section''Contact Section'
</ul>
<!--End Utilities section-->
<!--Header section, logo title-->
<a class="navbar-brand ms-3" href="/">{{ logo.name }} {% image logo. fill-50x50 %}</a>
<--Navigation section-->
...<!--End Navigation section -->
</div>
</nav>
Sass/CSS/* the navigation menu */
a.menuitem {
font-size: 1.2em;
font-weight: bold;
}
.nav-link, .fa-search, .nav-language{
color: $secondary !important;
}
.nav-link:hover, .fa-search:hover, .nav-language:hover {
color: $primary !important;
}
.nav-item.active {
border-bottom:2px solid $primary;
color: red !important;
}
/* slightly enlarge the image on hover */
a.menuitem .image-menu {
transition: transform 300ms;
}
a.menuitem:hover .image-menu {
transform: scale(1.1);
}
a.menuicon:hover {
text-decoration: none;
}
a.dropdown-menu {
min-width: 40px;
}
/* for the logo */
.navbar .navbar-brand {
font-family: 'Mochiy Pop P One', sans-serif!important;;
font-size: 30px !important;
color: $primary !important;
}
.nav-link .fa {
font-size:150%;
font-weight:100;
}
.navbar .fa {
font-size:2rem;
}
/*dropdown menu*/
.dropdown-submenu {
position: relative;
}
.submenu .dropdown-menu {
top:20px;
left:100%!important;
margin-top: -1px;
}
.dropdown-menu li a:hover {
color:$primary!important;
}
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-menu > li:hover > .submenu{ display: block; }
.dropdown-item {
width:auto;
}
/* different color for the parent item in the dropdown-menu */
.navbar-nav li a b {
color:$danger;
}
.navbar-nav li a b:hover {
color:$warning;
}
/* components class to hide the dropdown-toggle for utilities items*/
.components .dropdown-menu-end {
right: 0;
left: auto;
}
.components .dropdown-toggle::after {
content: none;
}
/*language badge*/
.nav-item .badgeClass{
position: relative;
}
.nav-item .badgeClass span{
position: absolute;
top: 0px;
right: 0px;
display: block;
font-size:.4em;
}
I have a checkbox like this,
<nav>
<div id="center">
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</div>
</nav>
but, the check box doesn't work on the check box selector and I don't know why.
this is my css nav and check box.
nav ul{
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ nav ul {
display: block;
}
On a related note, ~ is for the general successor sibling (meaning the element comes after this one).
Since your ul has the fixed position, move it after label tag.
Also remove nav from #check:checked ~ nav ul in css style.
nav ul {
position: fixed;
width: 100%;
height: 200px;
background: #2c3e50;
top: 47px;
display: none;
text-align: center;
padding-left: 0;
transition: all .5s;
}
#check:checked ~ ul {
display: block;
}
<nav>
<div id="center">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Skill</li>
<li>Profile</li>
</ul>
</div>
</nav>
Trying to create an adaptive post meta for a post card.
The idea is that sometimes the post meta could have more than one category inside and because of that I need somehow to wrap the items, but at the same time to vertically center the li content (like the avatar and icons).
I tried to apply display: inline-flex to the .entry-meta in order to be able to use the align-items: center property but in this case the list items - li's are not anymore wrapping nice like when applying display: inline to li.
1. The display: inline method (not centering items vertically)
This method is wrapping correctly and how I want all the list items but it can't center vertically the content (like the avatar and icons)
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
}
.entry-meta li {
display: inline;
margin-right: 10px;
background: #ccc;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>
2. The display: inline-flex method
The category li is not wrapped correctly, it breaks in a new line, but in exchange the content is vertically centered like I need.
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.entry-meta li {
margin-right: 10px;
background: #ccc;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>
So, in other words, I need somehow to keep the list items to wrap like they are with display: inline but at the same time center vertically the content inside.
P.S. the vertical-align: middle property doesn't really help :)
P.S. the vertical-align: middle property doesn't really help :)
This is actually what you need (applied to .avatar)
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
}
.entry-meta li {
display: inline;
margin-right: 10px;
background: #ccc;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
vertical-align:middle;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>
I'm trying to make it so when you hover over one of the categories in the header nav "CALLS | CHATS | MORE" the subnav below shows and the ul that is associated with the header nav changes its background color i know i can just add a class using jQuery but could i not do this with a sibling selector or something? i just think my HTML is layed out incorrectly at the moment for it to work TIA. this is what i currently have.
<header class="header">
<ul class="header__nav">
<li class="header__navItem header__navItem--calls">Calls</li>
<li class="header__navItem header__navItem--chats">Chats</li>
<li class="header__navItem header__navItem--more">More</li>
</ul>
<nav class="navigation">
<div class="navigation__wrapper cf">
<ul class="navItems navItems--calls">
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<div class="bgHover"></div>
</ul>
</div>
</nav>
</header>
.header {
height: 5.8rem;
background: rgba(25, 25, 25, 0.9);
position: absolute;
width: 100%;
z-index: 999;
&__nav {
display: inline-block;
text-align: center;
font-size: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0;
margin: 0;
}
&__navItem {
color: $white;
display: inline-block;
#include font-size(18);
padding: 0 4rem;
line-height: 5.8rem;
letter-spacing: 0.1rem;
position: relative;
cursor: default;
font-weight: 400;
text-transform: uppercase;
font-family: $lato;
&--calls {
&:hover ~ .navigation__wrapper .navItems .bgHover {
max-height: 35rem;
}
&:hover {
color: red;
}
}
}
I'm presuming you want the submenu to appear below the header nav. If so, then move your sub nav into the li tag for the corresponding header item, like so:
<li class="header__navItem header__navItem--calls">Calls
<ul class="navItems navItems--calls">
<li class="navItems__item">First</li>
<li class="navItems__item">Second</li>
<li class="navItems__item">Third</li>
<li class="navItems__item">Fourth</li>
</ul>
</li>
I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.