coding_tutor
New member
In this video, you can learn how to make a fixed bottom navigation bar with only HTML and CSS.
Welcome to the forum 👋, Visitor
To access the forum content and all our services, you must register or log in to the forum. Becoming a member of the forum is completely free.
HTML & CSS Navigation Bar
- Thread starter coding_tutor
- Start date
Moonlighter
New member
That's useful, thanks for sharing!
motivating
New member
I am looking for some help please, my wife has me build her business website [tmtclinic.com](https://tmtclinic.com) . She is very meticulous as to how she wants the site to look thus the reason I built it. I have done my best to create a desktop version that she approves of. I finally have convinced her that her site should be responsive as many people now just use their phones thus her site doesn’t work that well when using a mobile device. My biggest problem is how to make the nav bar responsive so it would work on a phone. I know this is backwards as to not starting with the mobile version first, I just could not convince her that when I started. I am self taught and I am stuck… lol . Any suggestions or where to look would be greatly appreciated. I have attached my files..
CSS
/* CSS Document */
.body{
height: 90vh;
margin: 2rem;
margin: 0;
padding: 20px 0 50px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"active;
background :#6F8C8F;
}
.wrapper{
position: relative;
width: 1430px;
height: 732px;
margin: auto;
background-image: url( "images/bgheader.png");
margin: 0 50;
background-size: cover;
}
.logo{
display: block;
height: 280px;
width:1430px;
}
.container{
position:absolute;
width: 1430px;
}
/*This is the Grid for the nav bar pics and nav buttons*/
.grid-8-columns{
width: 1430px;
display: grid;
grid-template-columns: 149.2px 171px 149.2px 171px 149.2px 171px 149.2px 171px 149.2px;
grid-template-rows:171px 50px;
place-items:center;
font-size: 22px;
}
.grid-8-columns a{
padding-top:10px;
text-decoration: none;
color: #f7eccc;
}
.grid-8-columns a:hover{
background-color: #ddd;
transition: background-color 0.5s;
color: white;
}
.yelbox{
height:171px;
width:149.2px;
background-image: url("images/yelbox.jpg")
}
.massage{
height:171px;
width:171px;
background-image: url("images/massage.jpg")
}
.physio{
height: 171px;
width:171px;
background-image: url("images/physio.jpg")
}
.acupuncture{
height: 171px;
width:171px;
background-image: url("images/acu.jpg")
}
.contact{
height: 171px;
width:171px;
background-image: url("images/contact.jpg")
}
/*This is the reception picture*/
.reception-image{
float: center;
max-width: 1430px;
overflow: hidden;
padding:10px 0 20 0;
}
/*This is the heading just bellow the nav bar*/
.topic_hed{
position:absolute;
width:1430px;
padding:195px 0 0 0 ;
margin: 70px 5px ;
color:#f7eccc;;
font-size: 30px;
text-align: center;
text-transform: uppercase;
letter-spacing: 8px;
}
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>headertest</title>
<link href="stylesheeta_2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<center>
<img src="images/tmtlogo.png" alt="TMT Logo"></center>
</div>
<div class="container">
<div class="grid-8-columns">
<div class="yelbox">
</div>
<div class="massage">
</div>
<div class="yelbox">
</div>
<div class="physio">
</div>
<div class="yelbox">
</div>
<div class="acupuncture">
</div>
<div class="yelbox">
</div>
<div class="contact">
</div>
<div class="yelbox">
</div>
<!--This is blank space to help align navbar word links-->
<div> </div>
<div> <a href="massage.html">Massage Therapy</a>
</div>
<div> <a href="about.html">About</a>
</div>
<div> <a href="physio.html">Physiotherapy</a>
</div>
<div> <a href="facilities.html">Facilities</a>
</div>
<div> <a href="acupuncture.html">Acupuncture</a>
</div>
<div> <a href="contact.html">Contact</a>
</div>
<div> <a href="booking.html">Online Booking</a>
</div>
<!--This is last blank space beloow yellow box above nave bar-->
<div> </div>
<!--I want to put a div tag here with a heading for the content-->
<div class="topic_hed">
<p>BOOKING APPOINTMENTS</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS
/* CSS Document */
.body{
height: 90vh;
margin: 2rem;
margin: 0;
padding: 20px 0 50px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"active;
background :#6F8C8F;
}
.wrapper{
position: relative;
width: 1430px;
height: 732px;
margin: auto;
background-image: url( "images/bgheader.png");
margin: 0 50;
background-size: cover;
}
.logo{
display: block;
height: 280px;
width:1430px;
}
.container{
position:absolute;
width: 1430px;
}
/*This is the Grid for the nav bar pics and nav buttons*/
.grid-8-columns{
width: 1430px;
display: grid;
grid-template-columns: 149.2px 171px 149.2px 171px 149.2px 171px 149.2px 171px 149.2px;
grid-template-rows:171px 50px;
place-items:center;
font-size: 22px;
}
.grid-8-columns a{
padding-top:10px;
text-decoration: none;
color: #f7eccc;
}
.grid-8-columns a:hover{
background-color: #ddd;
transition: background-color 0.5s;
color: white;
}
.yelbox{
height:171px;
width:149.2px;
background-image: url("images/yelbox.jpg")
}
.massage{
height:171px;
width:171px;
background-image: url("images/massage.jpg")
}
.physio{
height: 171px;
width:171px;
background-image: url("images/physio.jpg")
}
.acupuncture{
height: 171px;
width:171px;
background-image: url("images/acu.jpg")
}
.contact{
height: 171px;
width:171px;
background-image: url("images/contact.jpg")
}
/*This is the reception picture*/
.reception-image{
float: center;
max-width: 1430px;
overflow: hidden;
padding:10px 0 20 0;
}
/*This is the heading just bellow the nav bar*/
.topic_hed{
position:absolute;
width:1430px;
padding:195px 0 0 0 ;
margin: 70px 5px ;
color:#f7eccc;;
font-size: 30px;
text-align: center;
text-transform: uppercase;
letter-spacing: 8px;
}
