0

I have been researching for ways on how i can position my logo in the top for mobile device and below the logo is the navigation. This is what the logo and navigation looks like when viewed in a desktop. The logo sits in the middle of the navigation

http://s255.photobucket.com/user/testament1234/media/desktopnav_zps46660bfe.jpg.html?sort=3&o=0

And this is what it looks like when viewed in the mobile device

http://i255.photobucket.com/albums/hh140/testament1234/navigation_zps14a6e775.jpg

I'm using skeleton grid framework for designing this website.

This is my HTML/Markup

<!--HEADER -->
<div id="nav-container" class="container">
 <div class="six columns navigation navigation-left">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Projects">Projects</a></li>
         <li><a href="#" title="Blog">Blog</a></li>
     </ul>
 </div>
 <div id="logo" class="four columns hide-mobile">
     <h1><a href="#" title="Aleem Guialap">Aleem Guialap</a></h1>
 </div>
 <div class="six columns navigation navigation-right">
     <ul>
         <li><a href="#" title="About">About</a></li>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Contact">Contact</a></li>
     </ul>
 </div>
</div>

This is my CSS

/**************************/
/*   NAVIGATION           */
/**************************/


.navigation-right{text-align:right}
.navigation-right li{margin-right:40px}
.navigation-left li{margin-left:40px}
.navigation li{display:inline; line-height:130px}
.navigation a{text-decoration:none; color:#4d4d4d; font-size:25px}
.navigation a:hover{color:#7e2d2d}

#logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}

I will really be thankful to those who can provide me a solution for my problem. I'm not sure if i need to change my markup and just some simple styling.

clestcruz
  • 1,081
  • 3
  • 31
  • 75
  • check a similar question @ http://stackoverflow.com/questions/17510102/trying-to-fix-my-navigation-bar-for-mobile-devices – David Taiaroa Jul 10 '13 at 02:13

1 Answers1

0

I can think of 3 different approaches to your problem:

First is leave the markup, set the position of the logo to absolute then float both navigations to left and right.

Another is move the logo div on top of both navigation divs then center it using margin:0 auto, and don't forget to set the width of the div. Then float both navigation divs to left and right.

Third and my recommended approach is to combine both navigations to a single list, then float the first 3 items to the left then the other 3 to the right.

Glen Reyes
  • 21
  • 1
  • 2