coding_tutor
New member
In this video, you can learn how to make a fixed bottom navigation bar with only HTML and CSS.
HTML Forums | An HTML and CSS Coding Community
Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!
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;
}
Attachments
Similar threads
