I tried to place my logo (which I made in CSS) above the navigation bar. The logo has a negative z-index. I tried to fix it. But I still don't know how to fix it. When I load the code it places the logo over the navigation bar. Can anybody help me to place the logo above the navigation balk?
HTML:
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="random.css">
</head>
<body>
<div class="logo">
<h1 class="neon" data-text="[Home page]">[Home page]</h1>
</div>
<div class="menubalk">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Quicksand:300');
body {
background: url(bg.jpg);
background-size: cover;
font-family: 'Quicksand', sans-serif;
}
.neon {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
margin-bottom: 50px;
padding: 0 20px;
font-size: 6em;
color: #fff;
text-shadow: 0 0 20px #ff005b;
}
.neon:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
z-index: -1;
color: #ff005b;
filter: blur(15px)
}
.neon:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fe3a80;
z-index: -2;
opacity: .5;
filter: blur(40px);
}
ul {
display: block;
padding: 0;
font-family: Arial;
display: flex;
background: white;
}
ul li {
list-style: none;
padding: 10px 20px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 2em;
color: #262626;
position: relative;
}
ul li a:before {
content: '';
width: 0px;
height: 5px;
background: #00bcd4;
position: absolute;
top: 100%;
left: 0;
transition: .5s;
}
ul li:hover a:before {
width: 50%;
transform: translateX(100%);
}
Having position:absolute on .neon takes it out of the flow of the DOM and will put it above (over the top of) other elements. You can achieve the centering you need without it.
To solve your problem I did the following:
Changed .neon display to 'inline-block'
Changed .neon position to 'relative'
Changed .neon:after content to '' (empty)
Removed z-index from .neon:after
Changed z-index of .neon:before to -1
Click 'Run code snippet' below.
#import url('https://fonts.googleapis.com/css?family=Quicksand:300');
body {
background: url(bg.jpg);
background-size: cover;
font-family: 'Quicksand', sans-serif;
}
.neon {
display: inline-block;
position:relative;
left: 50%;
transform: translateX(-50%);
margin: 0;
margin-bottom: 50px;
padding: 0 20px;
font-size: 6em;
color: #fff;
text-shadow: 0 0 20px #ff005b;
}
.neon:after {
content: '';
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
color: #ffffff;
filter: blur(15px)
}
.neon:before {
content: '';
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fe3a80;
opacity: .5;
filter: blur(40px);
}
ul {
display: block;
padding: 0;
font-family: Arial;
display: flex;
background: white;
}
ul li {
list-style: none;
padding: 10px 20px;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 2em;
color: #262626;
position: relative;
}
ul li a:before {
content: '';
width: 0px;
height: 5px;
background: #00bcd4;
position: absolute;
top: 100%;
left: 0;
transition: .5s;
}
ul li:hover a:before {
width: 50%;
transform: translateX(100%);
}
<body>
<div class="logo">
<h1 class="neon">Logo</h1>
</div>
<div class="menubalk">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
Related
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>
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
I wrote a menu without JavaScript for my blog, however, the checkbox that activates the menu is for some reason slightly offset diagonally from the actual visible button elements. How do I change this (yes, I tried changing the positioning values, however, with no effect)? I'm aware there's a similar question here, however, it seems to be rather JS-based, and uses position: relative rather than position: fixed.
My relevant HTML is the following:
<nav>
<input type="checkbox">
<div id="oButton">
Open menu
</div>
<div id="cButton">
Close menu
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Archive</li>
<li>RSS Feed</li>
<li>Privacy</li>
<li>Source code</li>
</ul>
</nav>
and the CSS is this:
nav {
color: Black;
position: fixed;
top: 1em;
right: 1em;
width: 6em;
height: 1.5em;
user-select: none;
text-align: center;
margin: auto;
}
nav input {
display: block;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
cursor: pointer;
}
nav #oButton {
position: absolute;
top: 0;
right: 0;
width: 6em;
height: 1.5em;
z-index: 1;
background: #3CE13B;
}
nav #cButton {
position: absolute;
top: 0;
right: 0;
width: 6em;
height: 1.5em;
z-index: 2;
background: Orange;
opacity: 0;
}
nav ul {
position: absolute;
top: 0.5em;
right: 0;
padding: 0.7em;
width: 7.1em;
background: #EEE;
list-style-type: none;
text-align: right;
font-size: 0;
opacity: 0;
text-align: right;
padding-top: 0.1em;
}
nav input:hover+#oButton {
color:white;
}
nav input:hover~#cButton {
color:white;
}
nav input:checked~#cButton {
opacity: 1;
}
nav input:checked~ul {
font-size: 1.5em;
transition: opacity 0.25s linear;
opacity: 1;
}
fantasycookie17#ChameleonBook: ~/fantasycookie17.onederfultech.com $ kak _site/static/menu.css
fantasycookie17#ChameleonBook: ~/fantasycookie17.onederfultech.com $ ./deploy.sh
[info] Building from "/home/fantasycookie17/fantasycookie17.onederfultech.com/" into "/home/fantasycookie17/fantasycookie17.onederfultech.com/_site"
[info] Build successful
Enter passphrase for key '/home/fantasycookie17/.ssh/id_rsa':
Successfully synced.
Enter passphrase for key '/home/fantasycookie17/.ssh/id_rsa':
fantasycookie17#ChameleonBook: ~/fantasycookie17.onederfultech.com $ cat _site/static/menu.
cat: _site/static/menu.: No such file or directory
fantasycookie17#ChameleonBook: ~/fantasycookie17.onederfultech.com $ cat _site/static/menu.css
nav {
color: Black;
position: fixed;
top: 1em;
right: 1em;
width: 6em;
height: 1.5em;
user-select: none;
text-align: center;
margin: auto;
}
nav input {
display: block;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
cursor: pointer;
}
nav #oButton {
position: absolute;
top: 0;
right: 0;
width: 6em;
height: 1.5em;
z-index: 1;
background: #3CE13B;
}
nav #cButton {
position: absolute;
top: 0;
right: 0;
width: 6em;
height: 1.5em;
z-index: 2;
background: Orange;
opacity: 0;
}
nav ul {
position: absolute;
top: 0.5em;
right: 0;
padding: 0.7em;
padding-top: 0.1em;
width: 7.1em;
background: #EEE;
list-style-type: none;
text-align: right;
font-size: 0;
opacity: 0;
text-align: right;
}
nav input:hover+#oButton {
color:white;
}
nav input:hover~#cButton {
color:white;
}
nav input:checked~#cButton {
opacity: 1;
}
nav input:checked~ul {
font-size: 1.5em;
transition: opacity 0.25s linear;
opacity: 1;
}
Try adding margin: 0 to the checkbox element, it should solve it.
My navbar (or something) is extending too far and creating a horizontal scrollbar. I see people asking about this, but I cannot find the answer for my situation. The smaller I make the screen the bigger the space gets. Right now I'm just looking at IE.11.
Can someone please help? Thank you in advance.
Below is the code where I think the problem is. (html, page css and parallax css).
<body>
<div class="wrapper">
<header class="lighthouse">
<nav class="main">
<div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
<div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
<ul>
<li>HOME</li>
<li>WHO JESUS IS</li>
<li>WHO WE ARE</li>
<li>MEDIA</li>
<li>CONNECT</li>
</ul>
</nav>
<div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
<div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal" data-enllax-type="foreground"/></div>
<div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
</header>
CSS:
html, html * {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
width: 100%;
background-color: #000000;
position: absolute;
}
.top-nav-logo {
display: block;
width: 100%;
margin: 10px 10px 0 20px;
position: fixed;
z-index: 100;
}
.menu-icon {
width: 50%;
box-sizing: border-box;
background-color: #000;
text-align: right;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 1341px;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
nav ul {
list-style: none;
text-align: center;
background-color: rgba(0,0,0,0.0);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
transition: 1s;
z-index: 80;
}
nav.blue ul {
background-color: rgba(0,34,73,0.95);
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
display: inline-block;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.7em;
text-decoration: none;
}
nav ul li a:visited {
color: rgba(240,183,110,1.00);
}
nav a:hover {
color: #F0F694;
text-decoration: none;
font-weight: 700;
transition: 1.7s;
-webkit-transition: 1.7s; /*Safari*/
}
CSS for Parallax:
.lighthouse {
width: 100%;
height: 768px;
position: relative;
background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
background-size: auto 768px, cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
will-change: transform;
overflow: hidden;
}
.logo {
height: 140px;
width: 88%;
position: relative;
top: 170px;
margin: 0 auto;
text-align: center;
opacity: 0.65;
z-index: 20;
}
.seagull {
height: 123px;
width: auto;
position: relative;
left: -190px;
opacity: 0.8;
z-index: 10;
}
.welcome-home {
font-family: 'Kaushan Script', cursive;
font-size: 9.0em;
color: #004391;
position: relative;
text-align: center;
width: 98%;
top: 255px;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
Replace this code in your style sheet
You entered max-width:1341px; that is the reason it was expanded so far
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>