Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: Nav bar problem

  1. #1
    Junior Member
    Join Date
    Oct 2014
    Posts
    2
    Member #
    40357

    Nav bar problem

    Hello!
    I got some problem with my nav bar. I'm trying to build this https://imageshack.com/a/img674/8589/L6WRR6.gif
    But for some reason I just can't make it work in the HTML5/CSS3.
    I want the bar to be responsive friendly so it will be easy to manipulate it with @media.

    Can someone please give me a helping hand? I'm pretty new to this.

    Edit: I would prefer to write the logo instead of using a picture and I don't need no help with separators and active state, just the basic HTML/CSS construction.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    HTML Code:
    <nav>
      <ul>
        <li>OM OSS</li>
        <li>PORTFOLIO</li>
        <li>KONTAKT</li>
      </ul>
    </nav>
    Code:
    ul{
      float:right;
    }
    ul li{
      float:left;
    }
    nav::after{ /* This will clear the floats without adding an extra element */
      clear:both;
      content:"";
      display:block
      height:0;
      width:0;
    }
    This will create the basic structure for you. The rest is just the visual style of it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Oct 2014
    Posts
    2
    Member #
    40357
    Quote Originally Posted by Ronald Roe View Post
    HTML Code:
    <nav>
      <ul>
        <li>OM OSS</li>
        <li>PORTFOLIO</li>
        <li>KONTAKT</li>
      </ul>
    </nav>
    Code:
    ul{
      float:right;
    }
    ul li{
      float:left;
    }
    nav::after{ /* This will clear the floats without adding an extra element */
      clear:both;
      content:"";
      display:block
      height:0;
      width:0;
    }
    This will create the basic structure for you. The rest is just the visual style of it.
    Thank you so much, but my problem is to make the the logo work without messing up the navbar.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    How is it messing up the nav bar? You should say specifically what your problem is.. Whats it doing and what do you want it to do instead?


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Float the logo left, and it should work.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Banned
    Join Date
    Sep 2014
    Posts
    21
    Member #
    40215
    Liked
    1 times
    Hi,
    ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    </ul>


    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    thanks


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 11:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com