I want to make a fixed navbar at the bottom of the viewport with two sections. On the left, links for the rest of the site, and on the right, links to outside sources. I want to have everything both horizontally and vertically centered and to be responsive. For every solution I've tried, the height, alignment or size of the navbar is slightly off.
If I set the content div to 90% and the navbar div to 10%, then it "works" and things are aligned correctly, but I want the navbar to be slightly thinner.
As you can see with the border I styled the nav div with, its basically floating, and I have no idea why.
I've seen some similar questions, but a lot of the answers seem to point to outdated solutions using floats, etc.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
}
.main-content {
height: 90%;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
height: 5%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
</body>
Here's a CodePen.
So I did a few things to your code:
Made your page element a flexbox too:
.page {
height: 100%;
display: flex;
flex-direction: column;
}
And removed the heights for the main-content and nav, and the max-width for the main-content(better to set it in pixels according to content rather than percentages I guess).
For making the navbar slightly thinner perhaps you can reduce the line-height for the nav-left or nav-right.
Also added flex: 0 0 auto so that the the nav doesn't shrink too much when the height of the viewport is small (because line-height of nav is in viewport pixels).
See demo below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
}
.main-content {
/*height: 90%;*/
/*max-width: 70%;*/
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
/*height: 10%;*/
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto; /* addded */
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
Related
i don't understand hover really well, can someone tell me how to hover this footer properly? i want the text to glow with hover but instead the hover is glowing not only the text. there's also a problem with some logo's for the facebook etc. this is the code i tried. also can someone drop a link for the logo's? i think i lost the link n that's why the logo's wont appear.
body {
margin: 0;
overflow-x: hidden;
}
.footer {
background: #000;
padding: 30px 0px;
font-family: 'Play', sans-serif;
text-align: center;
}
.footer .row {
width: 100%;
margin: 1% 0%;
padding: 0.6% 0%;
color: gray;
font-size: 0.8em;
}
.footer .row a {
text-decoration: none;
color: gray;
transition: 0.5s;
}
.footer .row a:hover {
color: #fff;
}
.footer .row ul {
width: 100%;
}
.footer .row ul li {
display: inline-block;
margin: 0px 30px;
}
.footer .row a i {
font-size: 2em;
margin: 0% 1%;
}
#media (max-width:720px) {
.footer {
text-align: left;
padding: 5%;
}
.footer .row ul li {
display: block;
margin: 10px 0px;
text-align: left;
}
.footer .row a i {
margin: 0% 3%;
}
}
<footer>
<div class="footer">
<div class="row">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-twitter"></i>
</div>
<div class="row">
<ul>
<li>Contact us</li>
<li>Our Services</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
<li>Career</li>
</ul>
</div>
<div class="row">
Company name || lorem
</div>
</div>
</footer>
I think you could use text-shadow.
That's how I did it to glow green-ish :
text-shadow: 0 0 7px rgb(190 254 194), 0 0 122px rgb(173 236 175);
You can just add it to the hover pseudoclass
Hope it's help!
You might be missing the dependency required for the visibility of your logo. As your code seems to be using "Font awesome" kindly use its CDN or install it in your project then it will work fine.
Link to font awesome - https://fontawesome.com/v4/get-started/
And changing color when we are hovering text seems to be fine with your code snippet.
I am new to HTML CSS, can anyone tell me what am I doing wrong?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--pink: #ff6161;
--white: #fff;
--black: #292828;
--font: "Roboto", sans-serif;
}
header {
min-height: 100px;
max-width: 100%;
background-color: var(--pink);
display: flex;
justify-content: center;
align-items: center;
}
.menu {
max-width: 10rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-items {
list-style-type: none;
padding-right: 30px;
font-family: var(--font);
font-size: 20px;
}
.menu-items a {
text-decoration: none;
color: var(--black);
}
.search-bar {
width: 700px;
}
.inp {
width: 100%;
height: 2rem;
}
<header>
<div class="search-bar">
<input class="inp" type="text" />
</div>
<ul class="menu">
<i class="fa-solid fa-house"></i>
<li class="menu-items"> Home</li>
<i class="fa-solid fa-store"></i>
<li class="menu-items">Store</li>
<i class="fa-solid fa-headset"></i>
<li class="menu-items">Support</li>
</ul>
</header>
It's because you're using align items: center and justify-content: center in your header at the same time.
You're basically forcing items inside header to move to the center.
In your CSS, when you are modifying the header, you are putting all elements inside of it in the same position.
Something you could to fix this is, give the header a relative position, and then manipulate each element inside the header individually.
Change your display for menu to contents:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--pink: #ff6161;
--white: #fff;
--black: #292828;
--font: "Roboto", sans-serif;
}
header {
min-height: 100px;
max-width: 100%;
background-color: var(--pink);
display: flex;
justify-content: center;
align-items: center;
}
.menu {
max-width: 10rem;
display: contents;
justify-content: center;
align-items: center;
}
.menu-items {
list-style-type: none;
padding-right: 30px;
font-family: var(--font);
font-size: 20px;
}
.menu-items a {
text-decoration: none;
color: var(--black);
}
.search-bar {
width: 700px;
}
.inp {
width: 100%;
height: 2rem;
}
<header>
<div class="search-bar">
<input class="inp" type="text" />
</div>
<ul class="menu">
<i class="fa-solid fa-house"></i>
<li class="menu-items"> Home</li>
<i class="fa-solid fa-store"></i>
<li class="menu-items">Store</li>
<i class="fa-solid fa-headset"></i>
<li class="menu-items">Support</li>
</ul>
</header>
The sum of the text widths of the menu Home Store Support will be greater than max-width: 10rem;
.menu {
display: flex;
justify-content: center;
align-items: center;
}
Trying to build somthing unique at least for me. this is what i have so far i am having some issues getting the layout to be right.
What i am trying to do is create an H1 title that will link back to the home page. Underneath the Navbar will be 4 links evenly spaced across the page. Then 3 social media icons under the nav bar. I have all the items there, just confused as i cannot get anything to go right. the nav bar will seemingly fit fine, then i put the social media there and it bunches up on one of the sides. or the nav bar will be center but not spread out evenly even when i put into CSS to spread.
<header>
<div>
<h1>Amazing restaurant</h1>
<!-- nav -->
<nav>
Menu
Reservations
Special Offers
Contact
</nav>
</div>
</header>
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
nav {
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%;
text-align: center;
}
Here is a solution to your problem but I advice spending some time learning about flex
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
header .headerTitle {
text-decoration: none;
color: black;
margin-bottom: 25px;
}
header .navLinks {
padding: 12px;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
header .navLinks a {
color: black;
text-decoration: none;
font-size: 17px;
margin-bottom: 15px;
}
header .socialLinks a {
color: black;
text-decoration: none;
font-size: 14px;
margin: 7px 20px;
}
<header>
<a class="headerTitle" href="index.html">
<h1>Amazing restaurant</h1>
</a>
<div class="navLinks">
Menu
Reservations
Special Offers
Contact
</div>
<div class="socialLinks">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="fa fa-instagram">
<i class="fa fa-instagram"></i>
</a>
</div>
</header>
Hi I´m also starting at this and also want to show you the way that could solve the issue that you´re having. Understanding display options is very useful.
html {
box-sizing: border-box;
}
a,
a:before,
a:after {
box-sizing: inherit;
}
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.main-nav {
background-color: lightseagreen;
}
.main-nav li {
padding: 0.5rem;
color: white;
text-decoration: none;
font-size: 1rem;
text-align: center;
display: inline-block;
}
.lis {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.title {
color: lightseagreen;
font-size: 3rem;
}
<body>
<header>
<div>
<h1 class="title">Amazing restaurant</h1>
<!-- nav -->
<nav class="main-nav">
<li><a class="lis" href="#Menu">Menu</a></li>
<li><a class="lis" href="#Reservations">Reservations</a></li>
<li><a class="lis" href="#Special Offers">Special Offers</a></li>
<li><a class="lis" href="#Contact">Contact</a></li>
</nav>
</div>
</header>
</body>
Here is how you can achieve what you are looking for and also make it responsive at the same time. CSS Flexbox and Grid is where CSS starts to get tough and its wise to research multiple frontend instructors who teach it well. I like Wes Bos - he has a CSS Grid and a Flexbox course. They are both free.
If you can afford to spend some money, I really like Front End Masters and I actually learned how to code this NavBar from Jen Kramer in her CSS class. I find creating the NavBar in CodePen or a sandbox like that really helps. Just a couple of pointers of what worked for me.
Now, also to clarify - I have Google fonts for Oxygen and Oxygen mono linked in my header, as well as Font Awesome 5.
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* generic styles for the page */
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
/* intro styles */
#intro {
padding-bottom: 10rem;
}
#intro p {
font-size: 1rem;
line-height: 1.5;
}
#intro .name {
font-family: var(--mono);
font-size: 1rem;
}
.name span {
font-family: var(--sans);
font-size: 4rem;
color: var(--aqua);
display: block;
font-weight: 300;
}
#intro h2 {
font-size: 4rem;
}
/* contact section */
#contact {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 3rem 0;
}
#contact p:last-child {
margin-top: 3rem;
}
/* navigation */
nav {
font-family: var(--mono);
font-size: 80%;
padding: 1rem;
}
nav h1 a {
font-family: var(--sans);
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
nav li:first-child {
flex-basis: 100%;
text-align: center;
}
nav [class*="fa-"] {
font-size: 150%;
color: var(--aqua);
}
nav h1 [class*="fa-"] {
font-size: 100%;
color: var(--aqua);
}
nav a {
color: white;
text-decoration: none;
display: block;
}
nav a:hover,
nav [class*="fa-"]:hover {
color: var(--magenta);
}
#media (min-width: 850px) {
nav {
max-width: 1200px;
margin: 0 auto;
}
nav li:first-child {
flex-basis: auto;
text-align: left;
margin-right: auto;
}
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
</head>
<!-- instructions in JavaScript block -->
<nav>
<ul>
<li>
<h1>
<a href="index.html">
<span class="navHeader" aria-hidden="true"></span>
<span>Amazing Restaurant</span>
</a>
</h1>
</li>
<li>Menu</li>
<li>Reservations</li>
<li>Special Offers</li>
<li>Contact</li>
<li>
<a href="#Facebook" target="_blank">
<span class="fab fa-facebook" aria-hidden="true"></span>
<span class="sr-only">Facebook</span>
</a>
</li>
<li>
<a href="#Twitter" target="_blank">
<span class="fab fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter</span>
</a>
</li>
<a href="#Instagram" target="_blank">
<span class="fab fa-instagram" aria-hidden="true"></span>
<span class="sr-only">Instagram</span>
</a>
</ul>
</nav>
Keep playing with the code. Change the colors and margins and play around to see what happens in CodePen or your text editor. The next part is getting it to work with the rest of the page.
So I'm trying to make a simple nav bar with the logo on the right and the menu and search option on the left. However I cannot figure out how to vertically align them. I feel like this has probably an easy fix but I just can't figure it out. It's for a school asignment.
Here's my html & css
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
}
.main-nav {
grid-area: links;
background-color: transparent;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>
it currently looks like this
and I want it to look like this
Remove h1 and ul margin and try the snippet below.
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
align-items: center;
padding: .5rem;
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
border: solid;
margin: 0;
padding: 0;
}
.main-nav {
grid-area: links;
background-color: transparent;
border: solid;
margin: 0;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>
I can't reproduce the error given the code you have provided but adding align-items:center; should do what you want.
.navbardesk{
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
align-items:center;
background-color: rgba(141,125,31,0.9);
}
make sure, your li, a tag should be display: inline-block it will not work margin, padding in inline display.
I believe this will produce exactly what you are looking for, may be some tweaking you still need depending on your situation
#js-menu {
grid-template-columns: repeat(4,200px);
background-color: #f3f3ec;
justify-items: end;
align-items: center;
display: grid;
}
put this line of code along with your other css. there are many ways around!
I realize that this question was asked before by different posters, but I tried a lot of suggested answers and none of them seemed to work.
When inputting my logo into the NavBar, it keeps expanding. However, the <li class="logo"> slot is reserved in the navbar, as the left class does leave room, but only as much as their designated 8% width not 40%.
ul.navbar {
width: 100%;
height: 50px;
line-height: 50px;
list-style-type: none;
padding: 0;
background-color: #5D6576;
opacity: 0.8;
border: none;
}
li.logo {
float: left;
width: 40%;
}
li.left {
float: left;
color: white;
width: 8%;
}
li.left a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: #BC80BB;
transition: 1s;
}
li.right {
float: right;
width: 4%;
}
<ul class="navbar">
<li class="logo"><img src="static/logo.png" alt="Logo"></li>
<li class="left">Home</li>
<li class="left">*** Website</li>
<li class="right"><i class="fa fa-fw fa-envelope"></i></li>
<li class="right"><i class="fa fa-fw fa-phone"></i></li>
</ul>
Extremely expanding logo:
Showing the reserved spot:
Here i am sending you code as well as link. Please check it. If any changes then let me know.
https://jsfiddle.net/np6tzxyd/16/
.header-menu {
display: flex;
background-color: #5D6576;
opacity: 0.8;
width: 100%;
height: 50px;
line-height: 50px;
align-items: center;
justify-content: space-between;
}
.navbar-left,
.navbar-right {
display: flex;
list-style-type: none;
padding: 0;
border: none;
}
.navbar-left li,
.navbar-right li {
padding-right: 15px
}
.navbar-left li a:hover,
.navbar-right li a:hover {
color: #fff;
}
.logo {
display: block;
padding-right: 20px;
}
.logo-menu{
display: flex;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="header-menu">
<div class="logo-menu">
<a class="logo"><img src="static/logo.png" alt="Logo"></a>
<ul class="navbar-left">
<li>Home</li>
<li>*** Website</li>
</ul>
</div>
<ul class="navbar-right">
<li><i class="fa fa-fw fa-envelope"></i></li>
<li><i class="fa fa-fw fa-phone"></i></li>
</ul>
</div>
Following #Revti Shah answer to prevent jumping outside the nav you need to add this
overflow: hidden;
in your code
ul.navbar
or in her code
header-menu