How can I prevent this Bootstrap column from overlapping the other?

Bruce Gust
Bruce Gust used Ask the Experts™
on
Here's a screenshot that shows my dilemma:



Notice how my "reviews | shipping & returns | checkout | login" menu is overlapping the company's logo?

Why?

And how can I fix that?

Here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hardwood Timber &amp; Transportation Services | Camden, Tennessee | Admin Page</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!--<link rel="stylesheet" href="css/style.css">-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
	@media (max-width: 766px) {
		
		.company_logo {
			float: none !important;
			margin:auto;
			display:block;
			margin-top:15px;
		}

		.shopping_cart {
			margin:auto;
			display:block;
			margin-bottom:10px;
			background-image:url('images/shopping_cart.png'); 
			background-repeat:no-repeat; 
			width:267px; 
			height:106px;
		}
		
		.company_logo {
			margin-bottom:25px;
		}

		.content {
			max-width:625px; 
			border:1px solid #4f77b3;
			-moz-border-radius: 14px 14px 14px 14px; 
			border-radius: 14px 14px 14px 14px; 
			box-shadow:7px 7px 10px #4f77b3		
			margin:auto;
		}
	
	}
		
		
	/* Landscape phones and portrait tablets */
	@media (min-width: 767px) {

		#header_wwol {
			text-align:center;	
			min-height:80px;
		}

		.company_logo {
			margin-top:10px;
		}
		
		.shopping_cart {
			margin-top:5px;
			float:right;
			background-image:url('images/shopping_cart.png'); 
			background-repeat:no-repeat; 
			width:267px; 
			height:106px;
			margin-right:-50px;
		}
		
		.center_table_menu {
			text-align:center; 
			padding-top:50px;	
		}
		
		td.center_menu {
			text-align:center; 
			padding:5px;
			white-space:nowrap;		
		}

	}

	body, html {
		height: 100%;
		margin-bottom:45px;
		font-size:11pt;
		font-family:Arial, Helvetica;
	}
	
		.cart_counter {
			padding-top:82px;
			padding-left:20px;
		}

	.footer {
	position: fixed;
	bottom: -5px;
	padding: 0px;
	width: 100%;
	height: 45px; /* Set the fixed height of the footer here */
	background-image:url("images/footer_image.jpg");
	background-repeat: repeat-x;
	}

	</style>

	
</head>

<body>
	<div class="container-fluid" style="overflow:hidden; background-color:#ffffff;">
		<div class="row-fluid">
			<div class="col-md-4 col-xs-12">
				<img src="images/logo.jpg" class="images-responsive company_logo">
			</div>
			<div class="col-md-4 col-xs-12 center_table_menu">
				<table style="width:100%; margin:auto; ">
					<tr>
						<td colspan="9" style="border-bottom:1px solid #ccc;">&nbsp;</td>
					</tr>
					<tr>
						<td style="width:50px;">&nbsp;</td>
						<td class="center_menu">reviews</td>
						<td style="text-align:center;">|</td>
						<td class="center_menu">shipping &amp; returns</td>
						<td style="text-align:center;">|</td>
						<td class="center_menu">checkout</td>
						<td style="text-align:center;">|</td>
						<td class="center_menu">login</td>
						<td style="width:50px;">&nbsp;</td>
					</tr>
					<tr>
						<td colspan="9" style="border-top:1px solid #ccc;">&nbsp;</td>
					</tr>
				</table>
			</div>
			<div class="col-md-4  col-xs-12">
				<div class="shopping_cart">
					<div class="cart_counter">
						number of items in cart: 
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">&nbsp;<br></div>
		</div>
		<div class="row-fluid">
			<div class="col-xs-12" class ="header_div" style="background-image:url('images/header_divider.jpg'); background-repeat:x-repeat; width:115%; margin-left:-25px; height:41px;">
				<div style="display:inline-block; float:right; padding-top:3px; margin-right:12%;">
					<a href="admin.php"><img src="images/home.png" border="0" style="height:20px;" class="image_title" title="admin home page"></a>&nbsp;&nbsp;&nbsp;
					<a href="journal/index.php" target="_blank"><img src="images/journal.png" border="0" style="height:30px;" class="image_title" title="journal"></a>&nbsp;&nbsp;&nbsp;
					<div style="padding-top:6px; display:inline-block;"><a href="logout.php"><img src="images/logout.png" border="0" style="height:20px;" class="image_title" title="logout"></a></div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12"><br>
				To login to the WWOL Toolbox, fill in the fields below and click on "submit!"
			</div>
		</div>
		<form autocomplete = "off" id = "login" class="form-signin" onsubmit="validate()"  action="functions/login.php" method="POST">
			<div class="row">
				<div class="col-xs-12"><br>
					<div style="margin:auto; width:320px; border:1px solid #cccccc; border-radius:10pt; box-shadow:10px 10px 5px #cccccc; padding:0px 10px 0px 10px;"><br>
						<div class = "form-group">
							<input autocomplete = "off" type="text" id = "username" name = "EId" class="form-control input-sm" placeholder="Employee ID Number">
						</div>
						<div class = "form-group">
							<input autocomplete = "off" type="password" id = "password" name = "pwd" class="form-control input-sm" placeholder="Password">
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12" style="text-align:center; margin:auto;"><br>
				<input type="hidden" name="login_submit" value="submit">
					<input type="image" src="images/submit.jpg" name="login">
				</div>
			</div>
		</form>
	</div>	
<?php require_once("footer.php");?>

Open in new window


I've got my columns set up accordingly, as far as "col-md-4 col-xs-12," yet when it begins to get smaller, right about the time I would expect the elements to stack on top of one another, the middle menu starts to overlap the logo and I don't know why.

Not sure if it matters, but when I eliminate the center section and make the other two elements - the log and the Shopping Cart icon - col-md-6, it behaves wonderfully. That center section is something I want, however, I just can't get it to '"stack" before it begins to overlap.

What am I missing?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I usually create a smaller version (keep just a part) of the logo when logo are too big, I reuse this logo for the favicon.
Check with the owner they may have a lite version...

What you can do is to use 2 navigation bar
Reduce the logo size
Reduce the shopping cart image size or use an icon and use label for number items
example:
https://uxwing.com/menudemo/webslide/mobile-drawer-style/layout-03-ecommerce/#
Script
https://codecanyon.net/item/web-slide-bootstrap-4-mega-menu-responsive/21299306?s_rank=1
Bruce GustPHP Developer

Author

Commented:
Thanks, lenamtl!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial