Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post

    How do you create a nav menu with site logo in middle?

    Hi all,
    I'm using Twitter's Bootstrap framework to build my first responsive site. I need some help creating a custom header for my homepage and you can see a graphic mock up of it here.

    I can float the four menu items (Home, Our Menu, The Experience, Location) , however, I dont know how to do it so there is a gap in the middle for the background image (the kobe logo). Is there a way to do a pseudo class to give that second menu item (Our Menu) a custom margin space so it gives a gap between OUR MENU and THE EXPERIENCE? Or, would a better way to do this be by floating the two menu items HOME, OUR MENU to the left and then float THE EXPERIENCE, LOCATION to the right?

    Here's my code so far.

    Thank you for any help you can provide.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there skunker,

    does this example help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#b9a88c;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:100%;
     }
    #container {
        width:960px;
        margin:auto;
        padding:108px 0 40px; /*for testing */
        background-color:#43281d; /*for testing */
     }
    #nav {
        height:73px;
        margin:0;
        padding:0;
        list-style-type:none;
     }
    #nav li {
        float:left;
        width:190px;
        margin:0 1px;
     }
    #nav a {
        display:block;
        padding-top:46px;
        text-align:center;
        font-size:1.3em;
        font-weight:bold;
        color:#fdf3cf;
        text-decoration:none;
     }
    #nav a:hover,#nav #active {
        color:#0070bd;
     }  
    #nav #exp {
        padding-top:27px;
     }
    #nav a span {
        display:block;
        font-size:0.75em;
     }
    #nav img {
        display:block;
        width:184px;
        height:73px;
        margin:auto;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <ul id="nav">
     <li><a id="active" href="#">HOME</a></li>
     <li><a href="#">OUR MENU</a></li>
     <li><img src="http://ogmda.com/test/img/kobe_logo.png" alt="logo"></li>
     <li><a id="exp" href="#"><span>The KOBE</span>EXPERIENCE</a></li>
     <li><a href="#">LOCATION</a></li>
     </ul>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    coothead
    Last edited by coothead; 05-08-2013 at 06:00 PM.


  •  

    Posting Permissions

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