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

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?
brucegustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Thanks, lenamtl!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Bootstrap

From novice to tech pro — start learning today.