Jump to content
Please Use CODE Tags

CSS Responsive Navigation Bar Positioning

cpuxtech
By cpuxtech
in Programming
 Share
Posted

I am trying to start a basic responsive website, as a test to learn how to make a responsive website. I followed a tutorial here, http://www.hongkiat.com/blog/responsive-web-nav/ (this is the demo project: http://media02.hongkiat.com/responsive-web-nav/demo/index.html) and I got it working and everything but I am having a problem. I cannot position anything to the right of the inside the . For some reason everything(including the #pull link when the display is not set to "none", falls below the and the . I want to make a login form somewhere to the right of the in the and I cannot for the life of me figure out how to do it at all.

Im sure its just a basic CSS positioning issue that I can't figure out because I am new to this, but I just need to place more content on the and I cannot figure out how to. Thanks!

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Can you post your code?

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

I am trying to start a basic responsive website, as a test to learn how to make a responsive website. I followed a tutorial here, http://www.hongkiat.com/blog/responsive-web-nav/ (this is the demo project: http://media02.hongkiat.com/responsive-web-nav/demo/index.html) and I got it working and everything but I am having a problem. I cannot position anything to the right of the inside the . For some reason everything(including the #pull link when the display is not set to "none", falls below the and the . I want to make a login form somewhere to the right of the in the and I cannot for the life of me figure out how to do it at all.

Im sure its just a basic CSS positioning issue that I can't figure out because I am new to this, but I just need to place more content on the and I cannot figure out how to. Thanks!

 

 

 

Can you post your code?

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

This is the main index.html:

<!DOCTYPE html><html><head>	<title>Responsive Navigation Demo</title>	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	<link rel="stylesheet" href="normalize.css">	<link rel="stylesheet" href="style.css">	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>	<script>		$(function() {			var pull 		= $('#pull');				menu 		= $('nav ul');				menuHeight	= menu.height();			$(pull).on('click', function(e) {				e.preventDefault();				menu.slideToggle();			});			$(window).resize(function(){        		var w = $(window).width();        		if(w > 320 && menu.is(':hidden')) {        			menu.removeAttr('style');        		}    		});		});	</script></head><body>	<nav class="clearfix">		<ul class="clearfix">			<li><a href="#">Home</a></li>			<li><a href="#">How-to</a></li>			<li><a href="#">Icons</a></li>			<li><a href="#">Design</a></li>			<li><a href="#">Web 2.0</a></li>			<li><a href="#">Tools</a></li>			</ul>		<a href="#" id="pull">Menu</a>	</nav></body></html>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    margin:0;    padding:0;}/* Clearfix */.clearfix:before,.clearfix:after {    content: " ";    display: table;}.clearfix:after {    clear: both;}.clearfix {    *zoom: 1;}/* Basic Styles */body {	background-color: #ece8e5;	background-image:url('background.jpg');	-webkit-background-size: cover;	-moz-background-size: cover;	-o-background-size: cover;	background-size: cover;		}nav {	height: 40px;	width: 100%;	font-size: 11pt;	font-family: 'PT Sans',Arial,sans-serif;	font-weight: bold;	position: fixed;	background-color: rgba(0, 0, 0, 0.3);	/*Inset Shadow On Nav Bar*/	box-shadow: 0px 0px 20px black inset;	-moz-box-shadow: inset 0 0 20px black;    -webkit-box-shadow: inset 0 0 20px black;	box-shadow: inset 0 0 20px black;}nav ul {	padding: 0;	margin: 0 auto;	width: 600px;	height: 40px;}nav li {	display: inline;	float: left;}nav a {	color: #fff;	display: inline-block;	width: 100px;	text-align: center;	text-decoration: none;	line-height: 40px;	text-shadow: 1px 1px 0px #283744;}nav li a {	box-sizing:border-box;	-moz-box-sizing:border-box;	-webkit-box-sizing:border-box;}nav a:hover, nav a:active {	background-color: #8c99a4;}nav a#pull {	display: none;}/*Styles for screen 600px and lower*/@media screen and (max-width: 600px) {	nav {   		height: auto;  	}  	nav ul {  		width: 100%;  		display: block;  		height: auto;  	}  	nav li {  		width: 50%;  		float: left;  		position: relative;  	}  	nav li a {		border-bottom: 1px solid #576979;		border-right: 1px solid #576979;	}  	nav a {	  	text-align: left;	  	width: 100%;	  	text-indent: 25px;  	}}/*Styles for screen 515px and lower*/@media only screen and (max-width : 480px) {	nav {		border-bottom: 0;	}	nav ul {		display: none;		height: auto;	}	nav a#pull {		display: block;		background-color: #283744;		width: 100%;		position: relative;	}	nav a#pull:after {		content:"";		background: url('nav-icon.png') no-repeat;		width: 30px;		height: 30px;		display: inline-block;		position: absolute;		right: 15px;		top: 10px;	}}/*Smartphone*/@media only screen and (max-width : 320px) {	nav li {		display: block;		float: none;		width: 100%;	}	nav li a {		border-bottom: 1px solid #576979;	}}
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I actually figured it out, i needed to do this:

 

nav{

text-align:center;

}

 

nav ul{

display:inline-block;

}

 

nav > a#pull{

display:inline-block;

float:right;

}

And then the <ul> and the <a id="pull"> lay next to each other and menu button is all the way floated to the right.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×