There is a white space gap at the bottom of mine webs
Header and CSS#
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<b>Home</b>
<b>Profile</b>
<b>Messages</b>
<b>Reports</b>
</div>
<div class="navbar-nav ms-auto">
<b>Login</b>
</div>
</div>
</div>
</nav>
</div>
Footer#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<i class="icon ion-social-instagram px-5"></i>
<i class="icon ion-social-snapchat px-5"></i>
<i class="icon ion-social-twitter px-5"></i>
<i class="icon ion-social-facebook px-5"></i></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3">Home</li>
<li class="list-inline-item px-3">Services</li>
<li class="list-inline-item px-3">About</li>
<li class="list-inline-item px-3">Terms</li>
<li class="list-inline-item px-3">Privacy Policy</li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
You can solve your problem like this way,
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
Step 1: Set your body min-height: 100vh; and position: relative;
Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;
Here is the css,
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
you can fix the issue by yourself by right clicking on the page and select Inspect option.
Related
I have a responsive website I am working on. When it switches to the mobile layout, the topbar scrolls down a bit before it sticks to the top of the screen where it should be, misaligning everything. This works fine on the desktop layout.
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>
You might have to change the structure.
The reason for changing the structure is that you need to have the top header (Logo section) fixed on the top and your nav should start after that section.
If the Logo section takes the entire width, the nav section automatically stays below the logo section.
So, the changes I provided are:
Separate out the logo section and nav section in different divs and make them sibling so that nav section appears below the logo section.
Added top: 0 on the fixed logo section to keep it on top always.
Added margin-top of the height of the logo section to the nav section to make nav section visible .
<html>
<head>
<style>
#topbar {
top: 0;
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
margin-bottom: 49px;
height: 60px;
box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
}
#links {
margin-top: 60px;
}
body {
margin: 0;
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
</style>
<script defer src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="topbar">
<h1 id="logo">Logo</h1>
</div>
<nav>
<ul id="links">
<li>
<h1>Home</h1>
</li>
<li>
<h1>About</h1>
</li>
<li>
<h1>Products</h1>
</li>
<li>
<h1>Jobs</h1>
</li>
</ul>
<div id="menu-button">
<div id="line1"></div>
<div id="line2"></div>
<div></div>
</div>
</nav>
</body>
</html>
I think that's because of not using
top
left properties
Whenever you use position property you must use these 2 properties
Added Those two properties to #Topbar
#topbar{
top: 0;
left: 0;
}
No matter what I do, when resizing the screen or going on mobile, everything overlaps each other and images size down when they aren't supposed to.
Here is what the navigation bar looks like when resized:
Here is how it is supposed to be:
I did find a potential solution with the text, but it isn't exactly the solution I want. Especially with position: relative, which, for me, is hard to deal with since, no matter where you move your divs, it still processes it as being where it originally was. That is why I usually work with absolutes. So, if there is an alternative solution for that, it would be greatly appreciated. :)
What I am having a problem with at the moment is the image. If I do position: relative it resizes it when you change the browser size. I figured out a way to make it stabilize when it is absolute, but it still overlaps with other media when the browser is resized.
I have tried #media, (which for some reason breaks the whole browser, makes something disappear, or doesn't work,) overflow: hidden/auto, margins, paddings, indexes, max-width, max-height, ect. I can't seem to find a solution, though.
Here is the html and css code.
.nav-bar-links a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff;
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
color: 6s;
}
.nav-bar-links a:hover {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: rgb(253, 253, 159);
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
transition: color 0.6s;
}
.nav-logo img {
position: absolute;
max-width: 25%;
max-height: 20%;
z-index: 1;
float: left;
margin: 0x 20px 20px 20px;
padding: 0;
}
.nav-text-link a {
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0px 20px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
font-size: 50px;
float: left;
z-index: 1;
top: 10px;
left: 12%;
color: 6s;
}
.nav-text-link a:hover {
color: rgb(253, 253, 159);
color: 6s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="nav-bar-wrapper">
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="nav-logo">
<img src="/image.png">
</div>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
Thank you!
You haven't told us what you want to achieve exactly, but first step is to remove everything that makes the image behave weirdly, notably negative margin, float and position. Try to avoid these things as much as possible.
If you want to put columns or elements next to each other, you should use flex declarations on the parent element, the div that wraps the elements you want to arrange. Note that I moved your container-fluid out so it wraps everything. Not good to nest multiple containers inside one another.
Let me know where we want to take this from here (see, no overlapping!):
* { box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-logo img {
width: 100%;
margin-top: 2rem;
}
.nav-bar-wrapper {
padding: 1rem 2%;
display: flex;
align-items: center;
justify-content: space-between;
background: pink;
}
.nav-bar-links {
display: flex;
justify-content: space-between;
width: 60%;
}
.container-fluid {
max-width: 1400px;
}
.row {
margin: 0 4%; /* margin on each side of content */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="nav-bar-wrapper">
<div class="logo"><h1>LOGO</h1></div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="row">
<div class="column nav-logo">
<img src="https://wallpapercave.com/wp/ylvyN1V.jpg" alt="National park" title="National Park">
</div>
</div>
<div class="row">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="`nav-bar-wrapper`">
<div class="nav-logo">
<img src="/image.png">
</div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
add this css
.nav-bar-wrapper{
display:flex;
justfy-contant:space-between;
}
donot use any asolute positioning that is what is causing it to overlap
I'm trying to make a Google first page copy and i have a problem with the footer.
My copy footer look like this:
And i'm trying to achieve this:
That part with privacy, terms and settings, i want to make it stay in the same position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<!-- font awesome -->
<script
src="https://kit.fontawesome.com/8370b7a799.js"
crossorigin="anonymous"
></script>
<!-- custom css -->
<link rel="stylesheet" href="styles.css" />
<!-- Bootstrap -->
</head>
<body>
<nav class="nav-bar">
Gmail
Images
<i class="fab fa-buromobelexperte fa-lg"></i>
S
</nav>
<main class="main-google">
<div class="content">
<div class="img-div">
<img src="google.png" />
</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" />
<i class="fas fa-microphone"></i>
</div>
<div class="search-buttons">
<button class="changed-button">Google Search</button>
<button class="changed-button">I'm Felling Lucky</button>
</div>
<div class="lang-div">
<span>Google offered in:</span>
Romana
magyar
Deutsch
</div>
</div>
</main>
<footer class="footer">
<div>
<p class="location">Romania</p>
</div>
<div class="footer-link-bar">
Advertising
Business
About
How Search works
<span class="footer-links-right">
Privacy
Terms
Settings
</span>
</div>
</footer>
</body>
</html>
is it better to move that span outside the footer?
CSS
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer div {
background: #f2f2f2;
border: 1px solid #e4e4e4;
line-height: 40px;
font-family: arial, sans-serif;
font-size: 15px;
}
.location {
color: rgba(0, 0, 0, 0.54);
padding-left: 25px;
}
.footer div a {
margin-left: 25px;
text-decoration: none;
color: #5f6368;
}
.footer div a:hover {
border-bottom: 1px solid #5f6368;
}
.footer-links-right {
right: 0;
position: fixed;
}
.footer span a {
margin-right: 27px;
margin-left: 0;
}
And for the text decoration, i've tried to modify text-decoration-thickness but it doesn't work so i've used border bottom, but is there another posibility for me to use tect-decoration?
for the footer add a fixed minimum width, not a percentage.
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-width: 750px; /* footer doesn't shrink less than 750px */
}
rather you should add it to the container of the whole page for your desired situation.
body {
width: 100vw; /* maintain width of 100 view width(users viewpoint)** */
min-width: 750px; /* body doesn't shrink less than 750px */
}
** Relative Lengths => https://www.w3schools.com/cssref/css_units.asp
I am trying to add a background image to a divwhich will b e reffered from external stylesheet but failed to do so.Pls tell me how to do it.
.header {
height: 278px;
width: 100%;
display: inline-block;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.navbar-custom {
margin: 45px;
}
.color {
background-color: #7b97ac;
}
.nav {
font-size: 25px;
}
.nav li a {
color: #000;
}
.nav li a:hover {
color: #E50894;
}
.nav .active a {
color: #E50894;
}
.back {
background-image: url(../img/home.jpg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themida Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header">
<img src="img/Themida_logo.png" class="center">
<nav class="navbar navbar-custom center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>CONTACT US</li>
<li>LINKS</li>
</ul>
</div>
</nav>
</div>
<div class="back">
</div>
</div>
</body>
</html>
![This is the image i want to use as background
]1
Please help me.
You need to edit the .back class in your CSS file and add these:
.back {
background-image: url('https://i.stack.imgur.com/Dg4go.jpg');
background-size: cover;
width:600px; /* this can be adjusted to your taste*/
height:200px; /* this can be adjusted to your taste*/
}
In your HTML file you need to add content to see the image properly e.g
<div class="back">
<br><br><hr><br> <!-- add as many as you can for test purposes -->
</div>
Depending on the type of content you intend to add to the div, the width and height properties in the CSS might need to be tweaked, or even removed. Good luck.
You just need to add the height/width so that you can see the background-image, since it does not have any child
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
height: 300px;
width: 500px;
}
<div class="back">
</div>
If you add some content, you can see the image without adding width or height
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
}
<div class="back">
<br/><br/><br/><br/><br/><br/><br/>
</div>
The div has no dimensions (height, width) and therefore the background image won't show. It will only automatically show image if it is an IMG tag
In this one page site my aboutus and contact are not taking full width and height which i need.anymore suggestions are more welcomed.how to shrink top nav bar when about service and contact page comes.
/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.about {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.services{
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.contact {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ITspectra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/carousel-3d.js" ></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<style>
#wrapper {
width: 100%;
height:100%;
background-color: tan;
float:left;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color:black;
width:100%;
height:110px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
ul.nav.navbar-nav {
margin-left: 36%;
margin-top: 22px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="its.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<div data-carousel-3d >
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d//images/left.png" data-carousel-3d-left />
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d/images/right.png" data-carousel-3d-right />
<ul data-carousel-3d-children>
<li><img src="https://unsplash.it/640/420?image=628" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=633" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=626" /></li>
<li selected><img src="https://unsplash.it/640/420?image=629" /></li>
</ul>
</div>
</div>
<div class="container-fluid text-center">
<h3>Welcome to IT Spectra</h3><br>
<p id="ccont">IT Spectra excels in providing custom software and
mobile apps that match your speci cations, which is
just one of its many advantages: Extensive Team of experienced
professionals. 15+ years of IT experience.
Unique Ideas Expand skilled resources. Well within
budget and time constraints. Gain competitive advantage
in the market..</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="about">
<h2>About Us</h2>
<p id="fcont">IT Spectra excels in providing
custom software and mobile apps
that match your specifications,
which is just one of its many
advantages</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="services">
<h2>Company</h2>
<p id="fcont">Company Overview
Meet The Team
Our Awesome Partners
Our Services</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="contact">
<h2>Address</h2>
<p>IT SPECTRA<br/>
Flat-1A,1st Floor,<br/>
Plot No.38,James Street,<br/>
Ram Nagar-North,<br/>
Madippakkam,Chennai-91.</br>
Phone : 044 - 4957 7990<br/>
E-mail : info#itspectra.com<br/>
Web : www.itspectra</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Are you trying to reduce the height of the nav bar?
If so then you can use the following css override:
.navbar {
height: auto !important;
}