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>
Related
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
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
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;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
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%
I am currently trying to create a navbar that fills when hovered over a link. However, I would also like to have the link filled (or highlighted) while on the relative page. Any help would be much appreciated!
Note: This code has been retrieved from an open source.I am new learner of web technologies and working for a web project.
/*NAVIGATION */
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 100vh;
}
nav {
width: 60%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
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;
}
/* stroke */
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: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
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: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
<h2>Nav bar test</h2>
<nav class="fill">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Downloads
</li>
<li>More
</li>
<li>Contact
</li>
</ul>
</nav>
</section>
The best practice is just to add an "active" class to the current page button.
<li>Home</li>
And add "a.active" to every "a:hover" that you already have so it has the same css.
nav.fill ul li a:hover,
nav.fill ul li a.active { /* Here */
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after { /* Here */
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after { /* Here */
width: 100%;
}
Here is an jsfiddle live example: https://jsfiddle.net/884o5sjs/
(To get help faster, remember to create your own jsfiddle next time)
You could add the class="active" to the current page dynamically with php (suggested) or even with jQuery (not suggested), but since it looks like you are using ".html" you will have to add it manually on each page.
Hope this helps.
Looks like you've already achieved your first task of having it highlight when hovered. I would do this in php because that's the language I'm most comfortable, but then you'd also have to run a web server on your computer so hopefully you get some more helpful tips from some of the Jscript pros on here. If you do have to resort to php, one way I commonly do this is by having a variable on the page that lets the header know what page you're on, and then a few if statements that coorespond and apply a .current-page style.
I'm probably doing it the long way, but I just haven't learned Javascript yet.
the if statement would look like this within the li of the ul of the nav... <li <?php if ($title == "Home) { echo "class='current-page'"; } ?>>Home and so on for each element in the ul with the corresponding title, and title declarations in the body of the page.