SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to fix my navigation bar and logo for mobile devices

    I'm designing a responsive website and right now i have bit of a problem. Basically logo is set in the middle of the navigation but when i tried viewing it in mobile or set my browser for mobile it looks like this.

    http://i255.photobucket.com/albums/h...ps3a22ab61.jpg

    This is what it looks like in full screen.

    http://s255.photobucket.com/user/tes...0a09c.jpg.html

    How do I set the logo on top of the navigation when viewed in a mobile device.

    This is my code for the markup or HTML.

    Code:
    <div class="container">
     <div id="nav-container">
         <div class="six columns navigation">
         <ul>
             <li><a href="#" title="Home">Home</a></li>
             <li><a href="#" title="Home">Project</a></li>
             <li><a href="#" title="Home">Blog</a></li>
    
         </ul>
         </div>
         <div class="four columns">
             <h1>Logo</h1>
         </div>
         <div class="six columns navigation">
             <ul>
                 <li><a href="#" title="Gallery">Gallery</a></li>
                 <li><a href="#" title="Gallery">About</a></li>
                 <li><a href="#" title="Gallery">Contact</a></li>
             </ul>
         </div>
     </div>
    </div>
    And this is my code for my CSS

    Code:
    #nav-container{margin-top:20px;}
    .navigation{text-align:center; background-color:#D1673A;}
    .navigation li{display:inline; }
    .navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
    .navigation a:hover{color:white; background-color:black}
    My using skeleton framework in building my responsive website. Regarding my question do i set some styling in the media queries or change my markup?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know anything about the skeleton framework but something like this should do what you want.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #nav-container { margin-top:20px; }
    .navigation {
    	text-align:center;
    	background-color:#D1673A;
    }
    .navigation ul {
    	margin:0;
    	padding:0;
    	list-style:none
    }
    .navigation li { display:inline; }
    .navigation a {
    	text-decoration:none;
    	color:black;
    	display:inline-block;
    	padding:20px 20px 20px
    }
    .navigation a:hover {
    	color:white;
    	background-color:black
    }
     @media only screen and (max-width: 480px) {
    .navigation {
    	width:100%;
    	float:none;
    }
    .navigation a { display:block }
    #nav-container {
    	position:relative;
    	padding:70px 0 0;/* match the height of your logo*/
    	margin:0;
    }
    .logo {
    	position:absolute;
    	top:0;
    	left:0;
    }
    .logo h1{margin:0;}
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    		<div id="nav-container">
    				<div class="six columns navigation">
    						<ul>
    								<li><a href="#" title="Home">Home</a></li>
    								<li><a href="#" title="Home">Project</a></li>
    								<li><a href="#" title="Home">Blog</a></li>
    						</ul>
    				</div>
    				<div class="four columns logo">
    						<h1>Logo</h1>
    				</div>
    				<div class="six columns navigation">
    						<ul>
    								<li><a href="#" title="Gallery">Gallery</a></li>
    								<li><a href="#" title="Gallery">About</a></li>
    								<li><a href="#" title="Gallery">Contact</a></li>
    						</ul>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    At less than 480px width the media query sets the navigation to one column and absolutely places the logo at the top. The space is preserved via padding so you need to match that to your logo.

    You will of course need to check this with your main css files in place (which should be above the code above in the html).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •