CODEWITHSUNDEEP
htmlcss
Tom McNish
Tom McNish

Reputation: 95

How do I center a responsive navigation bar menu with CSS and HTML only?

I'm getting into creating responsive design, so I wanted to make a responsive menu. I found one online that uses CSS and HTML only (no JavaScript or Bootstrap) and I'm tweaking it to my liking. But I'm running in to lots of problems trying to apply normal properties to elements. I have a background div that's used to make the nav bar go 100% across the screen (because the original one I got only goes like 25% of the way across the screen), and I also created a container div so that I could put the menu in it. However, when I try to center the menu itself, I either get errors with my responsive menu (which will appear when you shrink the browser window) or I get lots of other junky things happening to the elements on the page. Here's the code I'm working with right now.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

<style>
body {
margin: 0;
}

#menuBackground {
background: #2f3036;
width: 100%;
height: 50px;
}


/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}

/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
}

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 16px 0;
display: none;
width: 100% !important;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
    margin: 0 auto;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
    position: static;
    display: none;
}    

/*Create vertical spacing*/
li {
    margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
    width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
    display:block;
    }
}

</style>


</head>
<body>
<div id="menuBackground">
    <div id="menuContainer">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
            <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">About ￬</a>
                <ul class="hidden">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">What We Do</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio ￬</a>
                    <ul class="hidden">
                        <li><a href="#">Photography</a></li>
                        <li><a href="#">Web & User Interface Design</a></li>
                        <li><a href="#">Illustration</a></li>
                    </ul>
                </li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    </div>
 </div>
 </body>
 </html>

Upvotes: 1

Views: 8160

Answers (1)

user4639281
user4639281

Reputation:

I got rid of the horrible floats, fixed your positioning issues and centered the menu.

(Demo)

body {
    margin:0
}

#menuBackground {
    background:#2f3036;
    width:100%;
    height:50px;
    text-align: center;
}
#menuContainer {
    text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    vertical-align: top;
    margin-right:1px;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff;
    background:#2f3036;
    text-decoration:none;
    font-size: 1rem;
}

/*Hover state for top level links*/
li:hover a {
    background:#19c589
}

/*Style for dropdown links*/
li:hover ul a {
    background:#f3f3f3;
    color:#2f3036;
    height:40px;
    line-height:40px
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background:#19c589;
    color:#fff
}

/*Hide dropdown links until they are needed*/
li ul {
    position: absolute;
    display:none
}

/*Make dropdown links vertical*/
li ul li {
    display:block;
}

/*Prevent text wrapping*/
li ul li a {
    width:auto;
    min-width:100px;
    padding:0 20px
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
    display:block
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration:none;
    color:#fff;
    background:#19c589;
    text-align:center;
    padding:16px 0;
    display:none;
    width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
    display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display:block;
    margin:0 auto
}

/*Responsive Styles*/
@media screen and (max-width : 760px) {
    /*Make dropdown links appear inline*/
    ul {
        position:static;
        display:none;
        white-space: initial;
    }

    /*Create vertical spacing*/
    li {
        margin-bottom:1px
    }

    /*Make all menu links full width*/
    ul li,li a {
        width:100%
    }

    /*Display 'show menu' link*/
    .show-menu {
        display:block
    }
}

Upvotes: 5

Related Questions