I'm trying to set up a website menu catalog for my restaurant and I am stuck on how to write text in the second column. See picture below. It is a drop down menu with two columns.
Also when I am using three columns it looks like this.
How do I fix it so the text are in the first column and they have the same formatting as the first picture? Here is my code,
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 65%;
box-shadow: 0 0 2px rgba(0, 0)
}
h1 {
text-align: center;
color: #fff200;
font-size: 50px;
}
.bold {
font-weight: 600;
}
.nav ul {
*zoom: 1;
list-style: none;
margin-top: 20%;
margin-left: -3%;
padding: 0;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.nav ul > li {
float: left;
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1em;
color: #fff;
border-left: 1px solid #595959;
font-size: 16px
}
.nav a:hover {
text-decoration: none;
background: #595959;
}
.nav li ul {
background: #273754;
}
.nav li ul li {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
-webkit-column-rule: 1px solid lightblue;
/* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue;
/* Firefox */
column-rule: 1px solid lightblue;
width: 500px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 0;
top: 36px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
.nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
}
<h1>Menu</h1>
<nav class="nav">
<ul>
<li>
Drinks
<ul>
<li><a>Pepsi</a></li>
<li><a>Diet Pepsi</a></li>
<li><a>Mountain Dew</a></li>
<li><a>Lemonade</a></li>
<li><a>Sierra Mist</a></li>
<li><a>Dr. Pepper</a></li>
<li>
<a></a>
</li>
</ul>
</li>
</ul>
</nav>
try to use inline-block display for you li elements and make their width to 50%. then the ul widthto 100%
Related
I have this problem when I try to add a logo to my navbar. When I put the logo before the other navbar items the logo is way too big and when I try to resize it still looks out of place. I would like to have to logo in line with the other items or have the other navbar items to be centered in line with the logo. I think using flexbox would be a lot simpler and make this process easier, but I would like to avoid using flexbox here for this navbar.
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
A very quick patch without flexbox is to add the declaration: vertical-align: middle; to your nav ul li { } rule
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
Your guess was correct. I added display: flex to the ul container. The list items are shown inline and centered both vertically and horizontally.
But they are kept on one single line word-wrapping their content.. did you prefer the items to overflow on next line?
nav {
background: rgb(255, 255, 255);
padding: 10px;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
padding: 2em;
padding-bottom: 0.6em;
padding-top: 0.6em;
}
nav ul {
/*as easy as using display flex on container*/
display: flex;
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.fill img {
width: 80px;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
text-align: center;
}
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li>Home</li>
<li>What we do</li>
<li>Goal 1</li>
<li>Goal 2</li>
<li>Earth by Lil Dicky</li>
</ul>
</nav>
Is there any way to make css style for input type="submit" button same like this style for nav bar buttons???
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content: '';
position: absolute;
display: block;
height: 0.3em;
background-color: #000000;
bottom: -0.9em;
transition: all ease-in-out 350ms;
left: 0;
width: 0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover {
color: rgb(0, 0, 0);
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
Why animation on nav bar, that red line, if you set 100% width on nav li a::after works backward and not from left to right side how it should be or how I want to?
HTML
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
CSS
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content:flex-start;
align-items: center;
padding: 1em 0;
}
nav li a {
text-decoration: none;
color: #000000;
padding-left: 3em;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 250ms;
}
nav li a:hover::after {
width: 60%;
}
nav li a:hover{
color: red;
}
You want to change multiple things because some css property is not appropriate for your html class...
nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 350ms;
left: 0;
width:0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover{
color: red;
}
<nav>
<ul>
<li>Domů</li>
<li>Fun Switcher</li>
<li>Radio</li>
<li>Fotky</li>
<li>Games</li>
<li>Chat</li>
</ul>
</nav>
Is this an accpetable solution for you?
`a{
display: flex;
align-items: center;
justify-content: center;
}`
add this to your css code
heres my codepen:
https://codepen.io/oskedram/pen/abWREpg
After creating a navigation bar, I discovered a transparent box around it, which has some transparent features. Though it's not strikingly noticeable, I would still like to remove it. I've attached an image and the CSS code. I think the .menu tag is creating the transparent box, but I don't know how to remove it.
/* Navigation */
.clearfix {
width: 595px;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 80px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
position: absolute;
top: 5.5%;
left: 55%;
}
.menu {
width: 100%;
margin: 0px;
right: 10px;
}
.menu li {
margin: 0px;
list-style: none;
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.menu a {
transition: all linear 0.15s;
color: #ffffff;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: #000000;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/* Top Level */
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 1em;
}
.menu > ul > li > a {
padding: 10px 30px;
display: inline-block;
text-decoration: none;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background: #ffffff;
}
/* Bottom Level */
.sub-menu {
width: 140%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #ffffff;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu li {
display: block;
font-size: 1em;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
color: #000000;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #e0e0e0;
}
I played around with it a little and figured it out, but anyone else can feel free to comment if my answer isn't satisfactory.
The problem was actually caused by the .menu-wrap tag, and all I had to do to remove it was remove the box-shadow: 0px 1px 3px rgba(0,0,0,0.2); attribute I added to the code. It seems this transparent box had problems with the box-shadow property.
I cant figure out how to make this transparent arrow to work when the link is ".active"
I created a bar underneath the navigation so the arrow could be transparent with the background, but I don't know how to make it be underneath the ".active" link when you click on it, any ideas to make the transparent arrow to work and be underneath the clicked element?
jsfiddle(please make the screen bigger because it's got media queries)
HTML
body {
background-image: url("http://www.crystalxp.net/galerie/img/th_13740.jpg");
}
#logo {
padding: 10px;
max-width: 210px;
display: inline-block;
margin: 5px auto 0 auto;
}
#media (min-width: 720px) {
#logo {
display: block;
float: left;
height: 54px;
max-width: auto;
width: 210px;
margin: 0px 5px 5px 5px;
padding: 0;
}
}
// header container
.header-container {
width: 100%;
background-color: #252525;
background-color: rgba(37, 37, 37, 0.97);
z-index: 2;
-webkit-box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
-moz-box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
}
.nav-actions {
display: none;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#media (min-width: 720px) {
.nav-actions {
display: block;
}
}
.nav-actions li {
float: left;
}
#media (min-width: 720px) {
.nav-actions li {
margin-left: 10px;
}
}
#media (min-width: 960px) {
.nav-actions li {
margin-left: 20px;
}
}
.nav-actions li a:link,
.nav-actions li a:visited {
padding: 4px 20px;
display: block;
margin-top: 13px;
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
text-decoration: none;
color: #e49e02;
border: 2px solid #e49e02;
}
.nav-actions li a:hover,
.nav-actions li a:active {
border: 2px solid #ffffff;
color: #ffffff;
}
.nav-actions li a.active {
text-decoration: underline;
}
.nav-list {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
margin: 0;
float: left;
padding: 0 0 0 0px;
display: none;
}
.nav-list li {
display: block;
float: left;
margin: 0;
}
.nav-list li:last-child {
margin-right: 0px;
}
#media (min-width: 720px) {
.nav-list {
display: block;
}
}
.nav-list li {
float: left;
}
.nav-list li a:link,
.nav-list li a:visited {
display: block;
color: #e49e02;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
}
#media (min-width: 720px) {
.nav-list li a:link,
.nav-list li a:visited {
padding: 15px 10px;
font-size: 0.85em;
}
}
#media (min-width: 960px) {
.nav-list li a:link,
.nav-list li a:visited {
padding: 15px 30px;
font-size: 1.3em;
}
}
.nav-list li a:hover,
.nav-list li a:active {
color: #ffffff;
}
.nav-list li a.active {
color: red;
}
.nav-list li a.active:after,
.nav-list li a.active:before {
content: '';
position: absolute;
top: 62px;
width: 56%;
padding-bottom: inherit;
background-color: rgba(37, 37, 37, 0.97);
}
.nav-list li a.active:before {
right: 49%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
.nav-list li a.active:after {
left: 53%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
<!--- header container --->
<header class="header-container">
<div class="header-container--inner">
<!--- site logo --->
<a href="/">
<img id="logo" src="http://placehold.it/100x50">
</a>
<!--- main nav --->
<ul class="nav-list">
<li>entries
</li>
<li><a class="" href="">event</a>
</li>
<li><a class="active" href="">store</a>
</li>
<li>archive
</li>
</ul>
<!--- main nav actions --->
<ul class="nav-actions">
<li>enter
</li>
</ul>
<!--- mobile nav link --->
<div class="small-navigation">
<a href="">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</header>
<!--- main wrapper --->
<div class="main-wrapper">
<!--- main container --->
<div class="main-container">