I am designing an electron application with a tabpane. However when the user makes the window smaller or adds more tabs the scrollbar that is supposed to let users see all the tabs does not work correctly. The scrollbar allows for a little movement but most of the tabs overflow regardless. I have uploaded a stripped down code snippet version of the app here so you can see my problem in more detail.
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.window {
position: relative;
display: flex;
flex-grow: 1;
}
.window__content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.action-bar {
display: flex;
flex-shrink: 0;
flex-direction: column;
overflow: hidden;
width: 44px;
transition: width 0.2s ease;
}
.action-bar .action-bar__item {
white-space: nowrap;
padding: 6px 12px;
}
.action-bar i {
font-size: 20px;
margin-right: 22px;
}
.action-bar__spacer {
flex-grow: 1;
}
.console {
position: relative;
height: 44px;
transition: all 0.5s ease;
min-height: 44px;
max-height: 50%;
overflow: hidden;
font-size: 13px;
}
.tabpane {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
position: relative;
}
.tabpane .tabpane__tabs {
position: relative;
white-space: nowrap;
flex-shrink: 0;
overflow-x: auto;
}
.tabpane .tabpane__tabs li {
position: relative;
display: inline-block;
padding: 8px;
font-size: 13px;
min-width: 80px;
max-width: 160px;
border: solid #1E1E1E;
border-width: 0 1px;
margin-right: -5px;
color: #8D8D8D;
background: #333333;
}
.tabpane .tabpane__tabs li:hover {
cursor: pointer;
}
.tabpane .tabpane__tabs li.tab--active {
border-top-width: 1px;
padding-top: 7px;
background: #1E1E1E;
color: white;
z-index: 2;
}
.tabpane .tabpane__tabs li i {
float: right;
visibility: hidden;
}
.tabpane .tabpane__tabs li:hover i, .tabpane .tabpane__tabs li.tab--active i {
visibility: visible;
}
#draggableTab {
color: #8D8D8D;
background-color: rgba(51,51,51,0.9);
outline: 1px solid rgba(64,64,64,0.9);
padding: 7px 8px;
font-size: 13px;
min-width: 80px;
cursor: pointer;
position: fixed;
z-index: 10030;
pointer-events: none;
white-space: nowrap;
}
#draggableTab i {
color: white;
float: right;
opacity: 0.3;
position: relative;
z-index: 9999;
}
.tabpane__panes {
position: relative;
display: flex;
flex-grow: 1;
overflow-y: scroll;
}
.tabpane__panes li {
display: none;
}
.tabpane__panes li.pane--active {
display: initial;
flex: 1;
padding: 0 44px;
background: #1E1E1E;
}
/* Colors */
.theme--dark {
color: white;
}
.shade--light {
background: #333333;
}
.shade--neutral {
background: #252526;
}
.shade--dark {
background: #1E1E1E;
}
.shade--darker {
background: #141516;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body class="theme--dark shade--dark">
<div class="window">
<ul class="action-bar shade--neutral">
<li class="action-bar__item" title="Expand"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="action-bar__item" title="Home" data-template="home"><i class="fa fa-home" aria-hidden="true"></i>Home</li>
<li class="action-bar__item" title="Search" data-template="search"><i class="fa fa-search" aria-hidden="true"></i>Search</li>
<li class="action-bar__item" title="Download" data-template="download"><i class="fa fa-download" aria-hidden="true"></i>Download</li>
<li class="action-bar__item" title="Statistics" data-template="statistics"><i class="fa fa-pie-chart" aria-hidden="true"></i>Statistics</li>
<li class="action-bar__item" title="Help" data-template="help"><i class="fa fa-question-circle" aria-hidden="true"></i>Help</li>
<li class="action-bar__divider shade--light"></li>
<li class="action-bar__item" title="Lights On"><i class="fa fa-sun-o" aria-hidden="true"></i>Lights On</li>
<li class="action-bar__item" title="Console"><i class="fa fa-code" aria-hidden="true"></i>Console</li>
<li class="action-bar__spacer"></li>
<li class="action-bar__item" title="Lock"><i class="fa fa-lock" aria-hidden="true"></i>Lock</li>
<li class="action-bar__item" title="Settings" data-template="settings"><i class="fa fa-cog" aria-hidden="true"></i>Settings</li>
</ul>
<div class="window__content">
<div class="tabpane">
<ul class="tabpane__tabs shade--neutral">
<li template="home" source="undefined" class="tab--active left">
Home
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_1" source="undefined" class="">
page 1
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_2" source="undefined" class="">
page 2
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_3" source="undefined" class="">
page 3
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_4" source="undefined" class="">
page 4
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_5" source="undefined" class="">
page 5
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_6" source="undefined" class="">
page 6
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_7" source="undefined" class="">
page 7
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_8" source="undefined" class="">
page 8
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
</ul>
<ul class="tabpane__panes">
<li class="pane--active">
<h1>Hello</h1>
<div style="max-width: 400px;">
<p>Try resizing your browser window until some tabs are hidden and a scrollbar appears.</p>
<p>I have removed the JavaScript for this example don't expect buttons to work. The scrollbar however needs to work no matter the height of the console window below the tabs or the width of the action bar to the left.</p>
</div>
</li>
<li>page for page 2</li>
<li>page for page 3</li>
<li>page for page 4</li>
<li>page for page 5</li>
<li>page for page 6</li>
<li>page for page 7</li>
<li>page for page 8</li>
</ul>
</div>
<div class="console console--is-closed shade--darker">
<div class="console__close"><span class="lnr lnr-cross"></span></div>
<div class="console__area">
<div class="console__resize-bar"></div>
<p><span class="console__point">Console> </span><input type="text" class="console__input"></p>
</div>
</div>
</div>
</div>
</body>
</html>
I think this would work for you.
just remove the flex-grow: 1; from .window__content and add width: calc(100% - 44px);
width: calc(100% - 44px); == width: calc(100% - .action-bar[width]);
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.window {
position: relative;
display: flex;
flex-grow: 1;
}
.window__content {
display: flex;
flex-direction: column;
width: calc(100% - 44px);
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.action-bar {
display: flex;
flex-shrink: 0;
flex-direction: column;
overflow: hidden;
width: 44px;
transition: width 0.2s ease;
}
.action-bar .action-bar__item {
white-space: nowrap;
padding: 6px 12px;
}
.action-bar i {
font-size: 20px;
margin-right: 22px;
}
.action-bar__spacer {
flex-grow: 1;
}
.console {
position: relative;
height: 44px;
transition: all 0.5s ease;
min-height: 44px;
max-height: 50%;
overflow: hidden;
font-size: 13px;
}
.tabpane {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
position: relative;
}
.tabpane .tabpane__tabs {
position: relative;
white-space: nowrap;
flex-shrink: 0;
overflow-x: auto;
}
.tabpane .tabpane__tabs li {
position: relative;
display: inline-block;
padding: 8px;
font-size: 13px;
min-width: 80px;
max-width: 160px;
border: solid #1E1E1E;
border-width: 0 1px;
margin-right: -5px;
color: #8D8D8D;
background: #333333;
}
.tabpane .tabpane__tabs li:hover {
cursor: pointer;
}
.tabpane .tabpane__tabs li.tab--active {
border-top-width: 1px;
padding-top: 7px;
background: #1E1E1E;
color: white;
z-index: 2;
}
.tabpane .tabpane__tabs li i {
float: right;
visibility: hidden;
}
.tabpane .tabpane__tabs li:hover i, .tabpane .tabpane__tabs li.tab--active i {
visibility: visible;
}
#draggableTab {
color: #8D8D8D;
background-color: rgba(51,51,51,0.9);
outline: 1px solid rgba(64,64,64,0.9);
padding: 7px 8px;
font-size: 13px;
min-width: 80px;
cursor: pointer;
position: fixed;
z-index: 10030;
pointer-events: none;
white-space: nowrap;
}
#draggableTab i {
color: white;
float: right;
opacity: 0.3;
position: relative;
z-index: 9999;
}
.tabpane__panes {
position: relative;
display: flex;
flex-grow: 1;
overflow-y: scroll;
}
.tabpane__panes li {
display: none;
}
.tabpane__panes li.pane--active {
display: initial;
flex: 1;
padding: 0 44px;
background: #1E1E1E;
}
/* Colors */
.theme--dark {
color: white;
}
.shade--light {
background: #333333;
}
.shade--neutral {
background: #252526;
}
.shade--dark {
background: #1E1E1E;
}
.shade--darker {
background: #141516;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body class="theme--dark shade--dark">
<div class="window">
<ul class="action-bar shade--neutral">
<li class="action-bar__item" title="Expand"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="action-bar__item" title="Home" data-template="home"><i class="fa fa-home" aria-hidden="true"></i>Home</li>
<li class="action-bar__item" title="Search" data-template="search"><i class="fa fa-search" aria-hidden="true"></i>Search</li>
<li class="action-bar__item" title="Download" data-template="download"><i class="fa fa-download" aria-hidden="true"></i>Download</li>
<li class="action-bar__item" title="Statistics" data-template="statistics"><i class="fa fa-pie-chart" aria-hidden="true"></i>Statistics</li>
<li class="action-bar__item" title="Help" data-template="help"><i class="fa fa-question-circle" aria-hidden="true"></i>Help</li>
<li class="action-bar__divider shade--light"></li>
<li class="action-bar__item" title="Lights On"><i class="fa fa-sun-o" aria-hidden="true"></i>Lights On</li>
<li class="action-bar__item" title="Console"><i class="fa fa-code" aria-hidden="true"></i>Console</li>
<li class="action-bar__spacer"></li>
<li class="action-bar__item" title="Lock"><i class="fa fa-lock" aria-hidden="true"></i>Lock</li>
<li class="action-bar__item" title="Settings" data-template="settings"><i class="fa fa-cog" aria-hidden="true"></i>Settings</li>
</ul>
<div class="window__content">
<div class="tabpane">
<ul class="tabpane__tabs shade--neutral">
<li template="home" source="undefined" class="tab--active left">
Home
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_1" source="undefined" class="">
page 1
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_2" source="undefined" class="">
page 2
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_3" source="undefined" class="">
page 3
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_4" source="undefined" class="">
page 4
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_5" source="undefined" class="">
page 5
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_6" source="undefined" class="">
page 6
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_7" source="undefined" class="">
page 7
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
<li template="page_8" source="undefined" class="">
page 8
<i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
</li>
</ul>
<ul class="tabpane__panes">
<li class="pane--active">
<h1>Hello</h1>
<div style="max-width: 400px;">
<p>Try resizing your browser window until some tabs are hidden and a scrollbar appears.</p>
<p>I have removed the JavaScript for this example don't expect buttons to work. The scrollbar however needs to work no matter the height of the console window below the tabs or the width of the action bar to the left.</p>
</div>
</li>
<li>page for page 2</li>
<li>page for page 3</li>
<li>page for page 4</li>
<li>page for page 5</li>
<li>page for page 6</li>
<li>page for page 7</li>
<li>page for page 8</li>
</ul>
</div>
<div class="console console--is-closed shade--darker">
<div class="console__close"><span class="lnr lnr-cross"></span></div>
<div class="console__area">
<div class="console__resize-bar"></div>
<p><span class="console__point">Console> </span><input type="text" class="console__input"></p>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this was helpfull for you.
The problem is the width of your tabpane. It should not be 100% (default), since there is the action bar on the left side
.tabpane {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
position: relative;
}
add
width:90%;
or whatever 100% - 44px would be
I think;
.window__content {
width: 90%; // add
}
Related
I have sticky left nav bar, I would like to active nav as per page, I did class active for related page nav items but now I moved to header single one master page now I added active class in any nav item the only one active nav shows whatever page I am is on. I need active item as per page nav, please help.
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>
Here i don't understand your question but here i understand a little bit what you want is nav active when clicked on one page, sorry if i misunderstood
Here I try my best to help and hope it helps
Here I added Jquery, you can try it
$(function(){
$('.navbar-nav a').on("click",function(){
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
})
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text ">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>
Right Now this is my homepage:
I used css content to show the link texts when the user hovers over the icons. However, right now whichever icon you hover over, it will show the same text "home". My question is how can I set different text outputs for each icon/link . Thank you in advance.
Navbar.html:
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<img src="{% static 'portfolio/logo.png' %}" alt="">
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-home "></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-cog"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-book"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-tasks"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-phone"></i>
</a>
</li>
</ul>
</nav>
_sidebar.scss:
.navbar{
position:fixed;
background-color: $navbg;
}
.navbar-nav{
list-style: none;
padding: 0;
margin: 0;
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
}
.nav-item{
width:100%;
&:last-child {
margin-top: auto;
}
}
.nav-link{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 5rem;
font-size: 2rem;
padding:1.5rem;
text-decoration: none;
i{
font-size: 3rem;
color: $navicon;
&:hover{
color:$icon-hover;
}
}
&:hover::after{
content : "Home";
position: absolute;
color:#12181b;
background: #b2becd;
right:-7rem;
border-radius: 0.5rem;
padding:0.5rem;
margin-left:2rem;
}
}
.logo{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-bottom: 2.5rem;
width: 100%;
img{
width:60%;
}
}
Using content isn't the correct way to add dynamic contents, that to to a compiled SCSS. You need to add another element, keep it hidden normally and show it when user hovers over it's parent.
This way you can add proper content for each icon whether statically or dynamically, following is a proof of concept:
.navbar {
position: fixed;
background-color: black;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:last-child {
margin-top: auto;
}
.nav-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 5rem;
font-size: 2rem;
padding: 1.5rem;
text-decoration: none;
}
.nav-link i {
font-size: 3rem;
color: white;
}
.nav-link i:hover {
color: red;
}
.label {
display: none;
}
.nav-item:hover .label {
display: block;
position: absolute;
color: #12181b;
background: #b2becd;
right: -7rem;
border-radius: 0.5rem;
padding: 0.5rem;
margin-left: 2rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-bottom: 2.5rem;
width: 100%;
}
.logo img {
width: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo"><img src="{% static 'portfolio/logo.png' %}" alt="">
</li>
<li class="nav-item">
<i class="fas fa-home "></i><span class="label">First Icon</span></li>
<li class="nav-item"><i class="fas fa-cog"></i><span class="label">Second Icon</span></li>
<li class="nav-item"><i class="fas fa-book"></i><span class="label">Third Icon</span></li>
<li class="nav-item"><i class="fas fa-tasks"></i><span class="label">fourth Icon</span></li>
<li class="nav-item"><i class="fas fa-phone"></i><span class="label">Fifth Icon</span></li>
</ul>
</nav>
You can use data attribute in html and call it from css for diffrent content values
// HTML
<li class="nav-item">
<a href="" class="nav-link" data-title="home">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" data-title="setting">
<i class="fas fa-cog"></i>
</a>
</li>
...
// CSS
.nav-link:hover::after {
content: attr(data-title); // added
position: absolute;
color: #12181b;
background: #b2becd;
right: -7rem;
border-radius: 0.5rem;
padding: 0.5rem;
margin-left: 2rem;
}
I'm trying to make some buttons with text positioned below a font awesome icon where both are positioned centrally inside a list item, and I need the anchor element, which also contains the span element for the font awesome icon, to fill the entire size of the list item.
I can fill the list item with the anchor no problem, but I'm having trouble positioning the icon's span above the text in the anchor that contains it.
JSFiddle: https://jsfiddle.net/qod142fz/.
HTML:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>
CSS:
/* SIDEBAR PRIMARY */
#sidebarPrimary
{
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton
{
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover
{
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a > span
{
display: block;
text-align: center;
margin-bottom: 5px;
}
Problem is coming from flex. I recommend wrapping another div around the elements that should be centered inside the a tags
/* SIDEBAR PRIMARY */
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a .fa {
display: block;
height: 1em;
margin: 0 auto 5px;
text-align: center;
width: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-home"></span>Home
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-user"></span>Personal Details
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-briefcase"></span>Company
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-gbp"></span>Invoices
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-address-book"></span>Contacts
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-minus"></span>Expenses
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-list"></span>Payslips
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-cog"></span>Settings
</div>
</a></li>
</ul>
</div>
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary>ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary>ul>li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary>ul>li.navButton>a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary>ul>li.navButton>a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary>ul>li.navButton>a>span {
display: block;
text-align: center;
margin-bottom: 5px;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 10px;
}
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>
Just add position: absolute; top: 40px; to font-awesome icons
I am trying to achieve the following layout:
What I've now is:
How do I get li.company under the li.name?
I have tried to float the company li to the left and and making it the last li but that doesn't work keeps going to the same line. Any help will be appreciated.
Here is my code:
#flip {
padding: 5px;
background-color: #4d4d4f;
border: solid 1px #c3c3c3;
width: 33vw;
}
.contact-widget-list,
.sender-info {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
.sender-info {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 30%;
}
.clearfix::after {
clear: both;
}
.sender-info li {
display: inline-block;
margin: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
float: right;
}
<div id="flip">
<ul class="sender-info">
<li class="name">Name 123123</li>
<li class="company">Company 123123</li>
<li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</li>
<li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
</li>
<li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
<li class="clearfix"></li>
</ul>
</div>
Just change the order of your HTML a bit. Place icons first in HTML and other items after it.
HTML:
<div id="flip">
<ul class="sender-info">
<!-- Following icons should come first in HTML -->
<li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</li>
<li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
</li>
<li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
<!-- Place following code after icons in HTML -->
<li class="name">Name 123123</li>
<li class="company">Company 123123</li>
</ul>
</div>
And add following css:
.sender-info .name,
.sender-info .company {
background: white;
overflow: hidden;
width: 200px;
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#flip {
padding: 5px;
background-color: #4d4d4f;
border: solid 1px #c3c3c3;
}
.contact-widget-list,
.sender-info {
list-style: none;
display: inline;
overflow: hidden;
margin: 0;
padding: 0;
}
.sender-info {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 30%;
}
.sender-info li {
margin: 5px;
padding-bottom: 5px;
}
.sender-info .name,
.sender-info .company {
background: white;
overflow: hidden;
width: 200px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
float: right;
}
<div id="flip">
<ul class="sender-info">
<li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</li>
<li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
</li>
<li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
<li class="name">Name 123123</li>
<li class="company">Company 123123</li>
</ul>
</div>
http://codepen.io/anon/pen/mJyOwp
My class container , around my website menu is being ignored , it is not working, it's as if it did not exist .
I want know how can i make the menu__list, which has absolute position respect the class container, which sets the extreme of this session.
This is possible?
HTML:
<section class="menu">
<div class="container">
<ul class="menu__list">
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
<li class="menu__item">
<!-- <i class="fa fa-calendar fa-3x"></i>-->
</li>
</ul>
</div>
</section>
CSS:
.container {
padding-left: 5%;
padding-right: 5%;
margin-left: auto;
margin-right: auto; }
#media only screen and (min-width: 768px) {
.container {
padding-left: 4.8%;
padding-right: 4.8%;
max-width: 768px; } }
#media only screen and (min-width: 992px) {
.container {
padding-left: 4.4%;
padding-right: 4.4%;
max-width: 992px; } }
.menu {
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0; }
.menu__list {
list-style: none;
position: absolute;
left: 50%;
top: 50%;
padding: 0;
margin: 0; }
#media only screen and (min-width: 768px) {
.menu__list {
width: 800px;
height: 645px;
margin-left: -400px;
margin-top: -322px; } }
.menu__item {
margin: 5px;
display: inline-block;
background-color: #FFF;
text-align: center;
width: 90px;
height: 90px; }
#media only screen and (min-width: 768px) {
.menu__item {
width: 200px;
height: 200px; } }
.menu__item:hover {
background-color: #000; }
.menu__item .fa-calendar {
width: 100%;
height: 100%;
color: #000;
line-height: 200px;
cursor: pointer; }
.menu__item .fa-calendar:hover {
color: #FFF; }
I was trying to use position relative, but the menu__list was never centered vertically.
Thanks!!!
just add position relative to .container
.container {
padding-left: 5%;
padding-right: 5%;
margin-left: auto;
margin-right: auto;
position:relative /**add this**/
}
Think about giving it a width and a height too.
If you want that you .menu__list have position absolute respect your .container you could add this:
.container {
...
position: relative;
}