Menu icon Foundation
Tag/Code Overload

Trying to redo our website from scratch with an emphasis on responsiveness. Nothing against Foundation itself; but just coding in general... The code below is of the top navigation area of the site. Still in the works; but looking at it, it seems like it's VERY CODE HEAVY (CSS aside) and lacking valuable content. It seems like there are too many rows and columns; and that coding takes up more space than it should. Is there anything glaringly obviously that I could combine to make it better (less code) using Foundation? Wireframe of what it should look like is also attached below. Thanks.

         <style>
    	body{
			background-image:url('images/template/bg.jpg');
			background-repeat:repeat-x;
			background-attachment:fixed;
		}
		.whitebg{background:#fff;}
		.tagline h1{
			margin:4px 0 0 0;
			padding:0;
			font-size:20px;
			color:#990000;
			font-weight:bold;
		}
		.telephone{
			margin-top:12px;
			text-align:center;
		}
		.telephone a{
			font-size:1.9em;
			color:#990000;
			text-align:center;
			font-weight:bold;
		}
		.mainnav li a{
			background-image:url('images/template/nav-bg.jpg');
			height:30px;
			margin:0px 0 0 0;
			padding:5px;
		}
		.mainnav li a:hover{
			background-image:url('images/template/nav-bg2.jpg');
		}
		.topsearch form{
			margin:6px 0 6px 0;
			padding:0;
		}
		.topsearch input{
			margin:0;
			padding:0 6px;
			font-size:12px;
			height:25px;
		}
		.topsearch .postfix.button{
			line-height:1.0rem;
			padding-top:3px;
			font-size:16px;
			height:25px;
			background:green;
		}
		.socialmediaicons a{
			margin-left:2px;
		}
		@media only screen and (max-width: 630px) {
			.telephone{font-size:1.2em;color:#990000;text-align:center;}
			.mainnav li a{
				background-image:none;
				background:#fff;
			}
			.mainnav li a:hover{
				background-image:none;
				background:#fff;
			}
		}
	</style>
    
    <div class="row">
    <div class="column small-12 whitebg">
		<div class="row"><!-- row#1 -->
			<div class="column large-12">
				<div class="row">
					<div class="column small-12 large-3">
						<a href="index.html"><img src="images/template/logo.jpg"></a>
					</div>
					<div class="column small-12 large-9">
						<div class="row">
							<div class="column large-8 small-12 tagline">
								<h1>Some fancy tagline will go here for now</h1>
							</div>
							<div class="column large-4 small-12 topsearch">
								<form action="http://www.google.com" method="post">
									<div class="row collapse">
										<div class="column small-10">
											<input type="text" placeholder="Search">
										</div>
										<div class="column small-2">
											 <input type="submit" value="Go" class="button postfix radius">
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="row collapse mainnav">
							<div class="column medium-10">
								<ul class="button-group radius hide-for-small-only even-5">
									<li><a href="#" class="button">Home</a></li>
									<li><a href="#" class="button">XXXXXX</a></li>
									<li><a href="#" class="button">XXXX</a></li>
									<li><a href="#" class="button">XXXXXXXXXX</a></li>
									<li><a href="#" class="button">XXXX</a></li>
								</ul>
								<a href="#" data-dropdown="drop1" class="button dropdown show-for-small-only">Menu</a><br>
								<ul id="drop1" data-dropdown-content class="f-dropdown show-for-small-only">
									<li><a href="#">Home</a></li>
									<li><a href="#">XXXXXX</a></li>
									<li><a href="#">XXXXX</a></li>
									<li><a href="#">XXXXXXXXXX</a></li>
									<li><a href="#">Blog</a></li>
								</ul>
							</div>
							<div class="column medium-2 text-right socialmediaicons hide-for-small-only">
								<a href="http://www.facebook.com/xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/facebook.png"></a>
								<a href="http://plus.google.com/+xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/googleplus.png"></a>
								<a href="http://www.youtube.com/user/xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/youtube.png"></a>
							</div>
						</div>
					<div>
				</div>
			</div>
		</div><!-- end of row#1 -->
		<div class="row"><!-- row#2 -->
			<div class="column large-3 telephone">
				<a href="tel:+18008280639">1-800-555-5555</a>
			</div>
			<div class="column large-9">
				<ul class="button-group radius hide-for-small-only even-4">
					<li><a href="#" class="button">Option 1</a></li>
					<li><a href="#" class="button">Option 2</a></li>
					<li><a href="#" class="button">Option 3</a></li>
					<li><a href="#" class="button">Option 4</a></li>
				</ul>
				<a href="#" data-dropdown="drop2" class="button dropdown show-for-small-only">Popular Destinations</a><br>
				<ul id="drop2" data-dropdown-content class="f-dropdown show-for-small-only">
					<li><a href="#">Option 1</a></li>
					<li><a href="#">Option 2</a></li>
					<li><a href="#">Option 3</a></li>
					<li><a href="#">Option 4</a></li>
				</ul>
			</div>
		</div><!-- end of row#2 -->
	</div>
</div><!-- end of master row -->

Header

codingcodeexcessive

Trying to redo our website from scratch with an emphasis on responsiveness. Nothing against Foundation itself; but just coding in general... The code below is of the top navigation area of the site. Still in the works; but looking at it, it seems like it's VERY CODE HEAVY (CSS aside) and lacking valuable content. It seems like there are too many rows and columns; and that coding takes up more space than it should. Is there anything glaringly obviously that I could combine to make it better (less code) using Foundation? Wireframe of what it should look like is also attached below. Thanks.

         <style>
    	body{
			background-image:url('images/template/bg.jpg');
			background-repeat:repeat-x;
			background-attachment:fixed;
		}
		.whitebg{background:#fff;}
		.tagline h1{
			margin:4px 0 0 0;
			padding:0;
			font-size:20px;
			color:#990000;
			font-weight:bold;
		}
		.telephone{
			margin-top:12px;
			text-align:center;
		}
		.telephone a{
			font-size:1.9em;
			color:#990000;
			text-align:center;
			font-weight:bold;
		}
		.mainnav li a{
			background-image:url('images/template/nav-bg.jpg');
			height:30px;
			margin:0px 0 0 0;
			padding:5px;
		}
		.mainnav li a:hover{
			background-image:url('images/template/nav-bg2.jpg');
		}
		.topsearch form{
			margin:6px 0 6px 0;
			padding:0;
		}
		.topsearch input{
			margin:0;
			padding:0 6px;
			font-size:12px;
			height:25px;
		}
		.topsearch .postfix.button{
			line-height:1.0rem;
			padding-top:3px;
			font-size:16px;
			height:25px;
			background:green;
		}
		.socialmediaicons a{
			margin-left:2px;
		}
		@media only screen and (max-width: 630px) {
			.telephone{font-size:1.2em;color:#990000;text-align:center;}
			.mainnav li a{
				background-image:none;
				background:#fff;
			}
			.mainnav li a:hover{
				background-image:none;
				background:#fff;
			}
		}
	</style>
    
    <div class="row">
    <div class="column small-12 whitebg">
		<div class="row"><!-- row#1 -->
			<div class="column large-12">
				<div class="row">
					<div class="column small-12 large-3">
						<a href="index.html"><img src="images/template/logo.jpg"></a>
					</div>
					<div class="column small-12 large-9">
						<div class="row">
							<div class="column large-8 small-12 tagline">
								<h1>Some fancy tagline will go here for now</h1>
							</div>
							<div class="column large-4 small-12 topsearch">
								<form action="http://www.google.com" method="post">
									<div class="row collapse">
										<div class="column small-10">
											<input type="text" placeholder="Search">
										</div>
										<div class="column small-2">
											 <input type="submit" value="Go" class="button postfix radius">
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="row collapse mainnav">
							<div class="column medium-10">
								<ul class="button-group radius hide-for-small-only even-5">
									<li><a href="#" class="button">Home</a></li>
									<li><a href="#" class="button">XXXXXX</a></li>
									<li><a href="#" class="button">XXXX</a></li>
									<li><a href="#" class="button">XXXXXXXXXX</a></li>
									<li><a href="#" class="button">XXXX</a></li>
								</ul>
								<a href="#" data-dropdown="drop1" class="button dropdown show-for-small-only">Menu</a><br>
								<ul id="drop1" data-dropdown-content class="f-dropdown show-for-small-only">
									<li><a href="#">Home</a></li>
									<li><a href="#">XXXXXX</a></li>
									<li><a href="#">XXXXX</a></li>
									<li><a href="#">XXXXXXXXXX</a></li>
									<li><a href="#">Blog</a></li>
								</ul>
							</div>
							<div class="column medium-2 text-right socialmediaicons hide-for-small-only">
								<a href="http://www.facebook.com/xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/facebook.png"></a>
								<a href="http://plus.google.com/+xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/googleplus.png"></a>
								<a href="http://www.youtube.com/user/xxxxxxxxxx" class=""><img height="30" width="30" src="images/template/social-media-icons/youtube.png"></a>
							</div>
						</div>
					<div>
				</div>
			</div>
		</div><!-- end of row#1 -->
		<div class="row"><!-- row#2 -->
			<div class="column large-3 telephone">
				<a href="tel:+18008280639">1-800-555-5555</a>
			</div>
			<div class="column large-9">
				<ul class="button-group radius hide-for-small-only even-4">
					<li><a href="#" class="button">Option 1</a></li>
					<li><a href="#" class="button">Option 2</a></li>
					<li><a href="#" class="button">Option 3</a></li>
					<li><a href="#" class="button">Option 4</a></li>
				</ul>
				<a href="#" data-dropdown="drop2" class="button dropdown show-for-small-only">Popular Destinations</a><br>
				<ul id="drop2" data-dropdown-content class="f-dropdown show-for-small-only">
					<li><a href="#">Option 1</a></li>
					<li><a href="#">Option 2</a></li>
					<li><a href="#">Option 3</a></li>
					<li><a href="#">Option 4</a></li>
				</ul>
			</div>
		</div><!-- end of row#2 -->
	</div>
</div><!-- end of master row -->

Header
Rafi Benkual over 5 years ago

I see your point. How would you make it better?

I think we are working within the limitations of browser support. There are really cool solutions on the horizon, like Flexbox that will help when browser support requirements change.