I'm creating navbar with submenu. The elements of the navbar have a bottom border that becomes visible when hovered on. Further, a submenu is also visible. Currently, the bottom border goes invisible when the cursor is moved to submenu. I want it to be visible as long as the submenu is open.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
/*Use this to change the postition of dropdown*/
padding-left: 1.1rem;
/*Use this to move the dropdown left and right*/
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.nav-list>li>a::after {
content: "";
position: absolute;
background-color: #ff2a00;
height: 4px;
width: 0;
left: 0;
bottom: -0.5px;
}
.nav-list>li>a:hover:after {
width: 100%;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
/*adjust postion */
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover {
color: #7e7978;
}
<div class="main" id="navbar">
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>shirts </li>
</ul>
</li>
</ul>
</nav>
</div>
I have added the following code to the .nav-list li:hover .sub-menu block
.nav-list>li:hover .sub-menu {
visibility: visible;
}
This makes sure that the sub-menu is visible as long as the parent element is hovered.
And also added the following code to the .nav-list>li>a:hover:after
.nav-list>li:hover>a::after {
width: 100%;
}
This makes sure that the bottom border is visible as long as the parent element is hovered.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
/*Use this to change the postition of dropdown*/
padding-left: 1.1rem;
/*Use this to move the dropdown left and right*/
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.nav-list>li>a::after {
content: "";
position: absolute;
background-color: #ff2a00;
height: 4px;
width: 0;
left: 0;
bottom: -0.5px;
}
.nav-list>li:hover>a::after {
width: 100%;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
/*adjust postion */
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover {
color: #7e7978;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.nav-list>li:hover>a::after {
width: 100%;
}
<div class="main" id="navbar">
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>shirts </li>
</ul>
</li>
</ul>
</nav>
</div>
Related
I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks
Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.
Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.
remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.
I'm trying to replicate the navigation bar from this website and can't work out how to do the following two things:
Create the page background overlay on hover of the submenu
How to make the submenu have the same expand reveal on hover of the link.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
a {
text-decoration: none;
}
.main {
width: 100%;
}
.section {
width: 100%;
background: #ededed;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 1100px;
margin: auto;
position: relative;
padding: 0 40;
}
.nav li {
color: #000;
}
.nav li a {
cursor: pointer
}
.nav ul {
list-style: none;
padding: 0;
margin-bottom: 0;
width: fit-content;
}
.nav ul:hover li {
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
padding: 0 35px 20px 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1;
height: 200px;
}
.sub-menu {
height: 0px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #2E2E2E;
display: none;
opacity: 0;
left: 0;
right: 0;
}
.col-1-4 {
height: 100%;
width: 25%;
position: relative;
}
.service {
padding: 20%;
}
.nav.servicesIsHovered {
background-color: #272727;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
I previously tried getting the overlay to work by adding a separate div to the end of the code and setting the opacity to zero, I then added more code to change the opacity to one, however, this failed.
What would be the best practise to achieve the two aspects above?
The sub-menu is done using absolute positioning and making all the ancestors up until the container not have any positioning (or default static positioning), so the sub-menu is positioned absolutely to the container.
The expand reveal is done using a height animation - the sub-menu has a fixed height that is animated on hover of the parent li
The overlay is done using fixed positioning and javascript - whenever you see inline styles change like that, you know it's js animation and not css.
Below I have added jQuery and shown a quick demo of how they may have done it
var $overlay = $('.overlay');
$('.sub-menu').parent()
.on('mouseenter', function() {
$overlay.fadeIn('fast');
})
.on('mouseleave', function() {
$overlay.fadeOut('fast');
});
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
a {
text-decoration: none;
}
.main {
width: 100%;
}
.section {
width: 100%;
background: #ededed;
}
.header {
z-index: 2;
position: relative;
display: flex;
width: 100%;
background:blue; /* needs a colour so you cannot see overlay behind */
}
.nav {
width: 1100px;
margin: auto;
position: relative;
padding: 0 40;
}
.nav li {
color: #000;
}
.nav li a {
cursor: pointer
}
.nav ul {
list-style: none;
padding: 0;
margin-bottom: 0;
width: fit-content;
}
.nav ul:hover li {
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
padding: 0 35px 20px 0;
}
li:hover>.sub-menu {
height: 200px;
}
.sub-menu {
height: 0px;
overflow: hidden;
/* hide the overflow so you don't need to worry about display and opacity */
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #2E2E2E;
left: 0;
right: 0;
transition: height 1s ease;
/* add this for your animation and remove display none */
}
.col-1-4 {
height: 100%;
width: 25%;
position: relative;
}
.service {
padding: 20%;
}
.nav.servicesIsHovered {
background-color: #272727;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
display:none;
/* above the body but below the header */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
<div class="overlay"></div>
I want to create a transition effect when hovering over my list element (or alternatively my anchor tags within these list elements).
Unfortunately, when I use my created transition the ::before pseudo-element (or the ::after, I'm not sure) are hiding what is technically its sibling content, that being the text within the anchor tags.
I've tried manipulating the z-index on the ul, li and a tags to no avail. The problem likely lies within my use of position: absolute in my transitions but I can't tell what I'm doing wrong.
Here's the HTML and CSS and a JSFiddle link
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</div>
</header>
</body>
give the parent li a z-index, then use z-index: -1 on the pseudo element to push it behind the a but on top of the li.
You also need to close your ul
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
transition: color .25s;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
z-index: -1;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</ul>
</div>
</header>
</body>
I was trying to make navigation bar of a demo present here http://www.templatemonster.com/demo/51129.html
HTML :
<div class="main-container">
<div class="top-nav-wrap">
<div class="top-nav">
<ul>
<li class="border"><a href="#" >HOME</a></li>
<li class="border submenu"><a href="#" >BLOG</a>
<div class="submenu-wrap">
<ul class="submenu-1">
<li>TESTIMONIALS</li>
<li>ARCHIVES</li>
<li>FAQS</li>
</ul>
</div>
</li>
<li class="border"><a href="#" >SERVICES</a></li>
<li class="border"><a href="#" >OUR GALLERY</a></li>
<li class="border"><a href="#" >CONTACTS</a></li>
</ul>
</div>
</div>
<div class="top-container">
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../images/header-img.jpg);
font-family: 'Roboto Condensed', sans-serif;
height: 1900px;
}
.top-container {
overflow: hidden;
}
.top-nav-wrap {
width: 100%;
}
div.top-nav-scrolled.top-nav-wrap {
position: fixed;
top: 0;
left: 0;
background: white;
}
.top-nav {
width: 1200px;
margin: auto;
/*overflow: hidden;*/
}
.top-nav ul {
/*overflow: hidden;*/
list-style: none;
}
.top-nav ul li {
position: relative;
float: left;
padding-top: 30px;
margin-left: 50px;
padding-bottom: 10px;
}
.top-nav ul li:first-child {
margin-left: 0;
}
.top-nav li a {
text-decoration: none;
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
color: #ba4b07;
}
.top-nav li.border::before {
position: absolute;
left: -25px;
content: '\\';
font-size: 20px;
color: #ba4b07;
}
.top-nav li.border:first-child::before {
content: '';
}
.top-nav li.border> a::after {
position: absolute;
top: -30px;
left: 0;
content: '';
display: block;
width: 100%;
height: 20px;
background: #ba4b07;
transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
top:0px;
}
.submenu-wrap {
height: 0px;
position: absolute;
top: 100%;
overflow: hidden;
transition: all 0.3s ease;
}
.submenu:hover > div {
height: 100%;
}
ul.submenu-1 {
width: 300px;
padding-top: 15px;
padding-bottom: 30px;
background:#ba4b07;
}
ul.submenu-1 li{
padding: 0px;
float: none;
margin: 0;
}
ul.submenu-1 li a {
display: block;
padding: 20px;
color: white;
font-size: 1em;
}
ul.submenu-1 li:hover {
background: white;
}
ul.submenu-1 li:hover a {
color: #ba4b07;
}
Js:
$(function(){
$('.top-nav ul li a').on('mouseover',function(){
$(this).addClass('hoverNav');
}).on('mouseout',function(){
$(this).removeClass('hoverNav');
});
$(window).on('scroll',function(){
$('.top-nav-wrap').addClass('top-nav-scrolled');
if($(window).scrollTop()==0){
$('.top-nav-wrap').removeClass('top-nav-scrolled');
}
});
});
The problem over here is .submenu:hover > div having height:100%;.
I saw many answers over here regarding height 100% but was not able to understand.
height:100% over here is taking only some part of the whole div and not the full.
I could have used hardcoded pixels but all my submenus are of different size and using the same class.
EDIT : Moreover using height:auto wont let my css transition to work. and same with using max-height.
I want my css transition to stay.
Change your sub-menu to height:auto, thus it calculates height according to the child elements present inside, as below.
Update to achieve height transition, you could try something as below, still height will be auto, but could transit using inner elements.
.submenu:hover >.submenu-wrap {
height:auto;
}
.submenu:hover >.submenu-wrap> ul.submenu-1 {
padding-top: 15px;
padding-bottom: 30px;
}
.submenu:hover >.submenu-wrap> ul.submenu-1 li a {
padding-top: 20px;
padding-bottom: 20px;
}
Check updated jsFiddle
You can use this code it may help you.
CSS
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../images/header-img.jpg);
font-family: 'Roboto Condensed', sans-serif;
height: 1900px;
}
.top-container {
overflow: hidden;
}
.top-nav-wrap {
width: 100%;
}
div.top-nav-scrolled.top-nav-wrap {
position: fixed;
top: 0;
left: 0;
background: white;
}
.top-nav {
width: 1200px;
margin: auto;
/*overflow: hidden;*/
}
.top-nav ul {
/*overflow: hidden;*/
list-style: none;
}
.top-nav ul li {
position: relative;
float: left;
padding-top: 30px;
margin-left: 50px;
padding-bottom: 10px;
}
.top-nav ul li:first-child {
margin-left: 0;
}
.top-nav li a {
text-decoration: none;
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
color: #ba4b07;
}
.top-nav li.border::before {
position: absolute;
left: -25px;
content: '\\';
font-size: 20px;
color: #ba4b07;
}
.top-nav li.border:first-child::before {
content: '';
}
.top-nav li.border> a::after {
position: absolute;
top: -30px;
left: 0;
content: '';
display: block;
width: 100%;
height: 20px;
background: #ba4b07;
transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
top:0px;
}
.submenu-wrap {
/*height: 0px;*/
position: absolute;
top: 100%;
overflow: hidden;
/*transition: all 0.3s ease;*/
display: none;
}
.submenu:hover > div {
/* height: 100%;*/
}
ul.submenu-1 {
width: 300px;
padding-top: 15px;
padding-bottom: 30px;
background:#ba4b07;
}
ul.submenu-1 li{
padding: 0px;
float: none;
margin: 0;
}
ul.submenu-1 li a {
display: block;
padding: 20px;
color: white;
font-size: 1em;
}
ul.submenu-1 li:hover {
background: white;
}
ul.submenu-1 li:hover a {
color: #ba4b07;
}
JS
$(function(){
$(".top-nav ul li").hover(function(){
$(this).find(".submenu-wrap").slideToggle();
});
$('.top-nav ul li').on('mouseover',function(){
$(this).children().addClass('hoverNav');
}).on('mouseout',function(){
$(this).children().removeClass('hoverNav');
});
$(window).on('scroll',function(){
$('.top-nav-wrap').addClass('top-nav-scrolled');
if($(window).scrollTop()==0){
$('.top-nav-wrap').removeClass('top-nav-scrolled');
}
});
});
This is incredibly frustrating but I am having problems aligning link text within an li after adding an animation. I took the animation from a menu that was aligned horizontally instead of vertically and have been able to integrate the animation in however my link text skewed as a result.
Each link is within an li. Below is a demo with circle animation:
.menubar {
position: absolute;
height: calc(100% - 32px);
width: 137px;
left: -140px;
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
padding-top: 0px;
padding-bottom: 40px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
text-align: left;
}
nav ul li {} nav ul li a {
display: block;
padding: 50px;
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
-webkit-animation: circle 1.2s ease-in forwards;
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%;
height: 20px;
top: -12px;
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
text-align: center;
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>
I have tried placing padding and using left and right on menu button, menu text, nav ul li a, everything. Even tried putting text in individual ps within the li.
But my text is still not centered in the box that forms on hover:
I need the text ("username", "chat," etc) to be left aligned within the menubar and centered (the text is slightly to the bottom and very much to the right) within the "circle" box that is formed on hover.
How can I do this?
Initially I had misunderstood your question and written a different answer. Below is the correct one.
There are a lot of extra/unnecessary settings in your code but the key reason why you are not able to achieve the left align is because the ul elements always have a default padding associated with it. It pushes the contents of the list to the right by a large value and hence it will look as though alignment is not proper.
If you make the changes that I've indicated in the below snippet, you'd be able to get what you need.
.menubar {
position: absolute;
/*height: calc(100% - 32px);
width: 137px; ideally these should be large enough to accomodate the element */
/*left: -140px; commented for demo */
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
/*padding-top: 0px;
padding-bottom: 40px; not required*/
text-transform: uppercase;
/*text-align: center; remove this */
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
line-height: 80px; /* add this to vertically center align the text */
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
/*text-align: left; not required as this is default */
padding: 0px; /* add this */
}
nav ul li {} nav ul li a {
display: block;
text-indent: 8px; /* add this to indent just the text without affecting white box */
padding: 0px; /* change this */
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
animation: circle 1.2s ease-in forwards; /* changed so others can see animation */
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%; /* change this */
/*height: 20px;
top: -12px; not required */
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
/*text-align: center; remove this */
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>