1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How remove a CSS hamburger button border and space above it

Discussion in 'CSS' started by ketting00, Mar 5, 2016.

0
  1. #1
    Hi guys,

    I've tried this for a while but I can't go anywhere. I seek help from you here.
    Here's the code:
    <!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>How the hell to do this?</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .bar {
            width: 100%;
            padding: 0.3em 0;
            text-align: center;
            background: rgba(101,101,101,1.0);
        }
        .nav {
            display: inline-block;
            padding: 0.3em 0.5em;
            text-align: center;
            border-radius: 2em;
            border-left: 0.08em solid #555;
            border-right: 0.08em solid #555;
            -webkit-box-shadow: 0 0 0.2em #888;
              -moz-box-shadow: 0 0 0.2em #888;
                    box-shadow: 0 0 0.2em #888;
        }
        .nav:last-child {
            display: inline-block;
            padding: none;
        }
        .nav a:active, .nav a:visited { color: #BBB; }
        .nav a:hover { color: #FFF; }
        .nav:nth-of-type(2) {
            margin-left: 0.3em;
            margin-right: 0.3em;
        }
        .hamburger {
            position: relative;
            font-size: .6em;
            width: 3.3em;
            height: 3.3em;
            background: #555;
            bottom: -1.7em;
        }
        .hamburger:before {
            border-top: 0.3em solid #efefef;
            content: "";
            position: absolute;
            width: 1.9em;
            height: 1em;
            border-bottom: 0.3em solid #efefef;
            top: 1em;
            left: 0.7em;
        }
        .hamburger:after {
            content: "";
            position: absolute;
            top: 1.6em;
            width: 1.9em;
            height: 0.3em;
            background: #efefef;
            left: 0.7em;
        }
    </style>
</head><body>
    <div class=bar>
        <ul>
            <li class=nav>
                <a href='#' title='Box 1'>Box 1</a>
            </li>
            <li class=nav>
                <a href='#' title='Box 2'>Box 2</a>
            </li>
            <li class=nav>
                <a href='#' title='Setting'><div class=hamburger></div></a>
            </li>
        </ul>
    </div>
</body></html>
    Code (markup):
    I want to align a CSS button in line with the others on the nav bar but thing doesn't go as planned.
    Since it can do using only CSS I don't want to use an image for the job.
    How can I get what I want.

    Thank you,
     
    ketting00, Mar 5, 2016 IP
  2. Leo-WS

    Leo-WS Greenhorn

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    Digital Goods:
    1
    #2
    Hi! You can just load Font Awesome off the CDN... saves you a lot of CSS pain.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>How to do this</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
    html, body{ padding:0; margin:0; border:0; }
    .bar{ width:100%; padding:0.3em 0; text-align:center; background:rgba(101,101,101,1.0); }
        .bar a{ color:#fff; }
        /* DO YOUR BOX STYLING HERE */
        .nav{ display:inline-block; padding:10px; border:1px solid #555; }
    </style>
</head>
<body>
    <h1>YOU CAN LOAD FONT AWESOME OFF THE CDN</h1>
    <a href="https://fortawesome.github.io/Font-Awesome/icons/" target="_blank">https://fortawesome.github.io/Font-Awesome/icons/</a>
    <br/><br/>

    <div class="bar">
        <div class="nav">
            <a href='#' title='Box 1'>Box 1</a>
        </div>
        <div class="nav">
            <a href='#' title='Box 2'>Box 2</a>
        </div>
        <div class="nav">
            <a href='#' title='Setting'><i class="fa fa-bars fa-lg"></i></a>
        </div>
    </div>
</body>
</html>
    HTML:
     
    Leo-WS, Mar 5, 2016 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    I've got help from another forum.

    Set vertical-align: middle; to the nav and remove bottom: -1.7em; from the hamburger.
     
    ketting00, Mar 5, 2016 IP