I am making a navbar of an e-commerce website and I want this little line to display like it is displayed below "Home", when the user is in that particular page.
When I write the code, this happens-
For some reason, that little bar, starts just after that Nav button ends.
body {
font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #121212;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after {
content: "";
width: 60%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
position: 0;
}
.logo {
width: 10rem;
}
<body>
<section id="header">
<img src="images/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li>Solutions</li>
<li>Pricing</li>
<li>About</li>
<li>Gallery</li>
<li><i class="fa-solid fa-headset"></i></li>
</ul>
</div>
</section>
</body>
position: 0 is not a valid CSS property:value pair. You have the position set to absolute which is correct, but then you overwrite it with an invalid property. So I deleted it.
Next step is to give the ::after element the same left value as the padding on the #navbar li, et voila you have aligned active underline.
In order to get proper alignment with the text, you have to remember that the underline is taken out of the document flow with position: absolute, so it won't take account for the padding that the text is in. We have to manually add the same left-side padding value the text has as a left position on the underline.
#navbar li {
list-style: none;
padding: 0 20px; /* has left padding of 20px */
position: relative;
}
#navbar li a.active::after {
content: "";
width: 60%;
left: 20px; /* aligning manually with the same value */
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
}
body {
font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #121212;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after {
content: "";
width: 60%;
left: 20px;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
}
.logo {
width: 10rem;
}
<body>
<section id="header">
<img src="images/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li>Solutions</li>
<li>Pricing</li>
<li>About</li>
<li>Gallery</li>
<li><i class="fa-solid fa-headset"></i></li>
</ul>
</div>
</section>
</body>
if you want a quick fix.
#navbar li a.active::after{
content: "";
width: 60%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
position: 0;
transform:translate(-135px); // x and y controls
}
Related
I want to make the navbar with logo. but its creating empty space below when adding height or width.
is there any css property I can use?
it does not look good like this.
this is navbar without logo
this is navbar with logo:
html:
<section id="header">
<a class="name" href="#header"
>SYNCC
<img
src="images/logo.png"
alt=""
height="90"
class="logo-png"
/></a>
<div>
<ul id="navbar">
<li><a class="active" href="#hero">Home</a></li>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
<li>
<a href="#carouselExampleControls"
><i class="fa-solid fa-cart-shopping"></i
></a>
</li>
</ul>
</div>
</section>
css:
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
/* background: #e3e6f3; */
background: #E5E6EE;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
right: 30%;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
}
.name {
font-family: "DynaPuff", cursive;
text-decoration: none;
font-size: 25px;
font-weight: 400;
color: #1a1a1a;
position: relative;
top: 10px;
}
.name:hover,
.name a {
color: #088178;
transition: 0.3s ease;
}
.name a::after,
.name a:hover {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
transition: 0.3s ease;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
tried using display : block;
I tried several ways to fix it.
any other way can use to make it correct.
Usally when this happens to me, I will just add top:--px; or bottom:--px; accordingly to make them line up.
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
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.
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I followed a tutorial about sticky navbar with pure css without javascript. The problem is that the sticky navigation bar is not fixed at the top of the page when i scroll down. Under this sticky navbar I have 3 other sections. Every time I scroll down the page that the navbar goes under sections and does not work anymore. In the header I have a full-width image and I have some text and a button on it.
Here is my code of navbar in HTML:
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .1);
position: sticky;
top: 0;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
Sorry for my bad english.
Thanks!
The reason why it behave is the use of z-index in the .intro .inner class. You will need to set the z-index: 11; on the .nav class for it to appear on top of everything.
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .8);
position: sticky;
top: 0;
z-index: 11;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
If you're not sure what other z-index values you gonna use. Most people set it to 999 for things that supposed to appear on top of everything at all times.
The nav is sticky, but only within it's parent (which is the .header). To fix this, simply make the .header sticky - this way it will be sticky as long as it's parent (which is .wrapper) is being scrolled.
And also give it a higher z-index than it's siblings (.intro inner has z-index: 10), or it will come underneath the intro inner when scrolled pass it :
header {
position: sticky;
top: 0;
z-index: 11;
}
The problem was that sticky propriety. i removed that from the nav and i added a transition and z-index as well.
nav{
position: fixed;
width: 100%;
height: 50px;
background: rgba(0,0,0,.2);
top: 0;
z-index:999;
transition: 0.5s;
}
nav ul{
display: flex;
margin: 0;
padding: 0 100px;
float:right;
}
nav ul li{
list-style: none;
}
nav ul li a{
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
Thank you all!
Make your wrapper's Height auto. this will fix your issue.